使用InstantClick.js讓頁面提前載入200ms實例詳解

這篇文章主要介紹了使用InstantClick.js讓頁面提前加載200ms，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

前言

加速網站載入的方式有很多，在@Roc的推薦下，我找到了這個InstantClick.js，仔細查看了官網的英文文檔，發現InstantClick.js有個很好的實作思維(how-it-works)。

在訪客點選連結前( 滑鼠測試：test yourself here )：

• 暫停hover (hover->click之間200ms左右)

• 滑鼠按下Mousedown (Mousedown->click之間100ms左右)，

• Touchstart 手機觸碰

#這兩個事件之間通常有200ms的間隔，InstantClick 利用這個時間間隔預先載入頁面。這樣點擊頁面的時候，其實頁面已經載入到本地了，呈現當然也就會很快。

當然InstantClick 也使用了 Pjax： pushState 和 Ajax 技術

同時我試用了下，的確效果不錯。如果你的部落格需要實作Pjax，InstantClick會是個不錯的選擇。

使用方法

下載instantclick.js。 instantclick.min.js僅2.5Kb，很小

使用

#

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

註：

• ##data- no-instant的意思是，這個JS只會運行一次，需要根據自己的情況，設定

• 如果想避免不必要的預加載，關閉hover，啟用Mousedown是個不錯的選擇，moursedown意味著已經點擊連結

查看效果

開啟chrome console，查看network視圖，會在每次hover時，都可以先載入頁面，在click時展示結果頁面。

由於沒有一個好的截動畫軟體，所以沒有gif動畫展示

擴充

#InstantClick也提供了幾個事件可以設定。

• change 頁面更改完畢，即click觸發載入後

• #fetch 頁面開始預先載入

• receive 頁面預先加載完畢，即：hover或mousedown觸發的預加載，但不一定會change，因為用戶不一定click

實例

因為使用ajax，所以google ga不會統計PV，所以增加change方法

<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>

以上是使用InstantClick.js讓頁面提前載入200ms實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！