前言

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

在訪問者點(diǎn)擊一個(gè)鏈接之前( 鼠標(biāo)測(cè)試：test yourself here )：

• 懸停 hover (hover->click之間200ms左右)
• 鼠標(biāo)按下 Mousedown (Mousedown->click之間100ms左右)，
• Touchstart 手機(jī)觸碰

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

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

同時(shí)我試用了下，的確效果不錯(cuò)。如果你的博客需要實(shí)現(xiàn)Pjax，InstantClick會(huì)是個(gè)不錯(cuò)的選擇。

使用方法

下載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的含義是，這個(gè)JS只會(huì)運(yùn)行一次，需要根據(jù)自己的情況，設(shè)置
• 如果想避免不必要的預(yù)加載，關(guān)閉hover，啟用Mousedown是個(gè)不錯(cuò)的選擇，moursedown意味著已經(jīng)點(diǎn)擊鏈接

查看效果

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

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

擴(kuò)展

InstantClick也提供了幾個(gè)事件可以設(shè)置。

• change 頁(yè)面更改完畢，即click觸發(fā)加載后
• fetch 頁(yè)面開始預(yù)加載
• receive 頁(yè)面預(yù)加載完畢，即：hover或mousedown觸發(fā)的預(yù)加載，但不一定會(huì)change，因?yàn)橛脩舨灰欢╟lick

實(shí)例

因?yàn)槭褂胊jax，所以google ga不會(huì)統(tǒng)計(jì)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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論