How to use pjax for page acceleration in Laravel applications

Note: PHPHub uses pjax to speed up the loading of web pages. This article is a note made after developing this function.

Related recommendations: "laravel tutorial"

What is Pjax

        .--.
       /    \
      ## a  a
      (   '._)
       |'-- |
     _.\___/_   ___pjax___
   ."\> \Y/|<&#39;.  &#39;._.-&#39;
  /  \ \_\/ /  &#39;-&#39; /
  | --&#39;\_/|/ |   _/
  |___.-&#39; |  |`&#39;`
    |     |  |
    |    / &#39;./
   /__./` | |
      \   | |
       \  | |
       ;  | |
       /  | |
 jgs  |___\_.\_
      `-"--&#39;---&#39;

The project address is here, the official introduction:

pushState ajax = pjax

For detailed explanation, please see Regarding this problem, or you can check the information yourself.

To describe it simply, it is to use ajax technology to get the document from the server, and update the current page without refreshing the browser page. , and can ensure that the js and css and other assets files of the page will not be loaded repeatedly, and then use the pushState function provided by the browser , updates the URL, and ensures that users can go back to the historical page by clicking the back button.

Note: Not all browsers support pushState, regarding browser compatibility Please see here. When the browser is incompatible, it will automatically use the original browsing method for access.

Why use Pjax

Because there is no need to refresh the entire page, and assets No files need to be reloaded, which greatly improves the loading speed of the page.

Server-side installation rcrowe/Turbo

Use package rcrowe/Turbo .

Installation rcrowe/Turbo

#Add under the require attribute in composer.json:

"rcrowe/turbo": "0.2.*"

Then composer update or composer install

Configuration Providers

#Edit app/config/app.php file, add in the options providers array:

"Turbo\Provider\Laravel\TurboServiceProvider",

Download pjax.js

In public\js Under the folder

wget https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

Then load this file in the template

<script src="{{ cdn(&#39;js/jquery.pjax.js&#39;) }}"></script>

Call on the last page:

$(document).ready(function(){    $(document).pjax('a', 'body');});

The above code explanation is to put all Intercept the click event of the a tag. If the current browser supports pjax, send an ajax request and bring the parameter _pjax=body.

If If all goes well, you can see a request similar to this in Chrome's debuger:

At this point, the configuration has been successfully completed.

Add loading animation

# Next we need to add a page loading animation, the effect is as follows:

Add nprogress

# Use rstacruz/nprogress to achieve.

The way to add is to download the file, and then add nprogress.js and nprogress.css to the page:

    <script src=&#39;nprogress.js&#39;></script>    <link rel=&#39;stylesheet&#39; href=&#39;nprogress.css&#39;/>

Call

#Modify the above code. The modified code is as follows:

$(document).ready(function(){    $(document).pjax('a', 'body');    $(document).on('pjax:start', function() {
      NProgress.start();  });  $(document).on('pjax:end', function() {
      NProgress.done();
      self.siteBootUp();  });});

In this case, there will be a cool effect every time you click on the page

The above is the detailed content of How to use pjax for page acceleration in Laravel applications. For more information, please follow other related articles on the PHP Chinese website!