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/|<'. '._.-' / \ \_\/ / '-' / | --'\_/|/ | _/ |___.-' | |`'` | | | | / './ /__./` | | \ | | \ | | ; | | / | | jgs |___\_.\_ `-"--'---'

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 useajaxtechnology to get the document from the server, and update the current page without refreshing the browser page. , and can ensure that thejsandcssand otherassetsfiles of the page will not be loaded repeatedly, and then use thepushStatefunction 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, andassetsNo files need to be reloaded, which greatly improves the loading speed of the page.

Server-side installationrcrowe/Turbo

Use package rcrowe/Turbo .

Installationrcrowe/Turbo

#Add under therequireattribute incomposer.json:

"rcrowe/turbo": "0.2.*"

Thencomposer updateorcomposer install

ConfigurationProviders

#Editapp/config/app.phpfile, add in the optionsprovidersarray:

"Turbo\Provider\Laravel\TurboServiceProvider",

Download pjax.js

Inpublic\jsUnder the folder

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

Then load this file in the template

Call on the last page:

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

The above code explanation is to put allIntercept the click event of the atag. If the current browser supportspjax, 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:

Addnprogress

# Use rstacruz/nprogress to achieve.

The way to add is to download the file, and then addnprogress.jsandnprogress.cssto the page:

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!