如何使用InstantClick.js讓頁面提前加載200ms

小編給大家分享一下如何使用InstantClick.js讓頁面提前加載200ms，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

加速網(wǎng)站加載的方式有很多，在@Roc的推薦下，我找到了這個InstantClick.js，仔細查看了官網(wǎng)的英文文檔，發(fā)現(xiàn)InstantClick.js有個很好的實現(xiàn)思路(how-it-works)。

在訪問者點擊一個鏈接之前( 鼠標測試：test yourself here )：

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

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

• Touchstart 手機觸碰

這兩個事件之間通常有200ms的間隔，InstantClick 利用這個時間間隔預加載頁面。這樣當你點擊頁面的時候，其實頁面已經(jīng)加載到本地了，呈現(xiàn)當然也就會很快。

當然InstantClick 也使用了 Pjax： pushState 和 Ajax 技術(shù)

同時我試用了下，的確效果不錯。如果你的博客需要實現(xiàn)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只會運行一次，需要根據(jù)自己的情況，設置

• 如果想避免不必要的預加載，關(guān)閉hover，啟用Mousedown是個不錯的選擇，moursedown意味著已經(jīng)點擊鏈接

查看效果

打開chrome console，查看network視圖，會在每次hover時，都可以先加載頁面，在click時展示結(jié)果頁面。

由于沒有一個好的截動畫軟件，所以沒有g(shù)if動畫展示

擴展

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

• change 頁面更改完畢，即click觸發(fā)加載后

• fetch 頁面開始預加載

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

實例

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

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

以上是“如何使用InstantClick.js讓頁面提前加載200ms”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！