Detailed example of using InstantClick.js to load the page in advance in 200ms

This article mainly introduces the use of InstantClick.js to load the page 200ms in advance. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Preface

There are many ways to speed up website loading. Under the recommendation of @Roc, I found this InstantClick.js and carefully checked the English of the official website. Documentation and found that InstantClick.js has a good implementation idea (how-it-works).

Before the visitor clicks on a link (mouse test: test yourself here):

• hover (about 200ms between hover->click)

• Mousedown (about 100ms between Mousedown->click),

• Touchstart and mobile phone touch

There is usually a 200ms interval between these two events, and InstantClick uses this time interval to preload the page. In this way, when you click on the page, the page has actually been loaded locally, and the rendering will of course be very fast.

Of course InstantClick also uses Pjax: pushState and Ajax technology

At the same time, I tried it and it worked really well. If your blog needs to implement Pjax, InstantClick would be a good choice.

Usage

Download instantclick.js. instantclick.min.js is only 2.5Kb, very small

Use

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

Note:

• data- The meaning of no-instant is that this JS will only run once. You need to set it according to your own situation.

• If you want to avoid unnecessary preloading, it is a good idea to turn off hover and enable Mousedown. Select, moursedown means you have clicked on the link

View the effect

Open the chrome console and view the network view. It will appear every time you hover. You can load the page first and display the result page when clicked.

Since there is no good animation software, there is no gif animation display

Extension

InstantClick also provides several events that can be set.

• change The page has been changed, that is, after click triggers loading,

• fetch page starts preloading

• receive The page is preloaded, that is: preloading triggered by hover or mousedown, but it may not change because the user may not click

Instance

Because ajax is used, Google ga will not count PV, so the change method is added

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga(&#39;send&#39;, &#39;pageview&#39;) */
 
InstantClick.on(&#39;change&#39;, function() {
 ga(&#39;send&#39;, &#39;pageview&#39;, location.pathname + location.search);
});
 
InstantClick.init();
</script>

The above is the detailed content of Detailed example of using InstantClick.js to load the page in advance in 200ms. For more information, please follow other related articles on the PHP Chinese website!