instant.page一個(gè)強(qiáng)大JS——預(yù)加載頁(yè)面，提升網(wǎng)頁(yè)速度instant.page是一個(gè)強(qiáng)大的JS腳本，他可以使你的網(wǎng)站預(yù)加載下一個(gè)頁(yè)面，它不僅對(duì)桌面端游效果，還能在移動(dòng)端起到加速作用，而這個(gè)JS使用起來(lái)也很方便，這篇文章來(lái)介紹及使用instant.page。 介紹 官網(wǎng)地
instant.page是一個(gè)強(qiáng)大的JS腳本，他可以使你的網(wǎng)站預(yù)加載下一個(gè)頁(yè)面，它不僅對(duì)桌面端游效果，還能在移動(dòng)端起到加速作用，而這個(gè)JS使用起來(lái)也很方便，這篇文章來(lái)介紹及使用instant.page。
官網(wǎng)地址：https://instant.page/
一段來(lái)自官網(wǎng)的介紹
On desktop
Before a user clicks on a link, they hover their mouse over that link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload.
Another option is to preload when the user starts pressing their mouse, right before releasing it. This makes for virtually zero unused requests while still improving page loads by 80 ms on average.
On mobile
A user starts touching their display before releasing it, leaving on average 90 ms for the page to preload.
Another option is to preload links as soon as they’re visible.
博主英語(yǔ)不咋樣 用谷歌翻譯加上我的理解 大致意思是
桌面端：當(dāng)用戶懸停鼠標(biāo)65ms時(shí)，即開始對(duì)這個(gè)頁(yè)面進(jìn)行預(yù)加載，而普遍情況下人們對(duì)鼠標(biāo)懸停都在300ms以上。
移動(dòng)端：當(dāng)用戶觸摸的屏幕的一瞬間就開始進(jìn)行預(yù)加載，平均可以留出90ms來(lái)進(jìn)行預(yù)加載。
官網(wǎng)上給了一個(gè)點(diǎn)擊測(cè)試 鼠標(biāo)移動(dòng)到測(cè)試按鈕與按下彈起一瞬間的速度 博主試了試 刻意比較快的按 平均在100ms左右 有興趣的可以去官網(wǎng)嘗試一下
實(shí)際使用 效果很明顯 可以在瀏覽器Network測(cè)試中看到 鼠標(biāo)放上就開始了預(yù)加載 僅預(yù)加載了html 不浪費(fèi)資源 節(jié)省流量 還大大增加了資源分配效率
1、WordPress使用插件（不建議）
如果你的網(wǎng)站是WordPress可以在插件中心直接搜索instant.page就可以安裝插件使用了
博主不推薦使用這種方法因?yàn)?它會(huì)增加WordPress插件而產(chǎn)生臃腫
2、使用官方代碼（可以，但不太建議）
<script src="http://instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
解釋一下：
type的module參數(shù) 它被當(dāng)作一個(gè)JavaScript模塊對(duì)待 不支持該參數(shù)（不支持該JS）的瀏覽器 則不執(zhí)行該JS
defer屬性 僅適用于外鏈，規(guī)定腳本延遲執(zhí)行
integrity屬性 看它后面是一串sha384加密值 用來(lái)與這個(gè)JS進(jìn)行校驗(yàn) 以防下載出錯(cuò)或者劫持等問題
官方文檔給了說(shuō)明 使用官方的src鏈接 可能會(huì)被廣告插件屏蔽該JS 所以可能導(dǎo)致部分用戶不生效
3、使用自己的資源（建議）
將該網(wǎng)站的這段存為JS 放到自己的服務(wù)器中或者CDN中
使用代碼：
<script type="module" src="‘存放路徑或域名目錄’/instantpage3.0.0.js"></script>
自己用 就不用defer和integrity屬性校驗(yàn)了? 直接引入JS就完了
默認(rèn)對(duì)帶有查詢字符串的鏈接和外部鏈接該JS不生效
白名單標(biāo)簽屬性
data-instant
例：
可用在外部鏈接中 譬如：友鏈、子域名網(wǎng)站等
黑名單標(biāo)簽屬性
data-no-instant
不想進(jìn)行預(yù)加載的鏈接
帶有查詢字符串("?")的鏈接
全局允許 在<body>中添加data-instant-allow-query-string屬性
局部允許 在使用的標(biāo)簽中添加?data-instant?屬性（和白名單屬性一樣）
僅預(yù)加載某些鏈接（白名單模式）
如果只想預(yù)加載特定的鏈接，請(qǐng)?jiān)?lt;body>中添加一個(gè)data-instant-whitelist標(biāo)簽，并通過向其添加data-instant屬性來(lái)標(biāo)記要預(yù)加載的鏈接。
版權(quán)所有：重慶安菲科技有限公司
