instant.page一個強大JS——預加載頁面，提升網頁速度
instant.page一個強大JS——預加載頁面，提升網頁速度instant.page是一個強大的JS腳本，他可以使你的網站預加載下一個頁面，它不僅對桌面端游效果，還能在移動端起到加速作用，而這個JS使用起來也很方便，這篇文章來介紹及使用instant.page。 介紹 官網地
instant.page一個強大JS——預加載頁面，提升網頁速度instant.page是一個強大的JS腳本，他可以使你的網站預加載下一個頁面，它不僅對桌面端游效果，還能在移動端起到加速作用，而這個JS使用起來也很方便，這篇文章來介紹及使用instant.page。 介紹 官網地
instant.page是一個強大的JS腳本，他可以使你的網站預加載下一個頁面，它不僅對桌面端游效果，還能在移動端起到加速作用，而這個JS使用起來也很方便，這篇文章來介紹及使用instant.page。
官網地址：https://instant.page/
一段來自官網的介紹
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.
博主英語不咋樣 用谷歌翻譯加上我的理解 大致意思是
桌面端：當用戶懸停鼠標65ms時，即開始對這個頁面進行預加載，而普遍情況下人們對鼠標懸停都在300ms以上。
移動端：當用戶觸摸的屏幕的一瞬間就開始進行預加載，平均可以留出90ms來進行預加載。
官網上給了一個點擊測試 鼠標移動到測試按鈕與按下彈起一瞬間的速度 博主試了試 刻意比較快的按 平均在100ms左右 有興趣的可以去官網嘗試一下
實際使用 效果很明顯 可以在瀏覽器Network測試中看到 鼠標放上就開始了預加載 僅預加載了html 不浪費資源 節(jié)省流量 還大大增加了資源分配效率
1、WordPress使用插件（不建議）
如果你的網站是WordPress可以在插件中心直接搜索instant.page就可以安裝插件使用了
博主不推薦使用這種方法因為 它會增加WordPress插件而產生臃腫
2、使用官方代碼（可以，但不太建議）
<script src="http://instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
解釋一下：
type的module參數 它被當作一個JavaScript模塊對待 不支持該參數（不支持該JS）的瀏覽器 則不執(zhí)行該JS
defer屬性 僅適用于外鏈，規(guī)定腳本延遲執(zhí)行
integrity屬性 看它后面是一串sha384加密值 用來與這個JS進行校驗 以防下載出錯或者劫持等問題
官方文檔給了說明 使用官方的src鏈接 可能會被廣告插件屏蔽該JS 所以可能導致部分用戶不生效
3、使用自己的資源（建議）
將該網站的這段存為JS 放到自己的服務器中或者CDN中
使用代碼：
<script type="module" src="‘存放路徑或域名目錄’/instantpage3.0.0.js"></script>
自己用 就不用defer和integrity屬性校驗了? 直接引入JS就完了
默認對帶有查詢字符串的鏈接和外部鏈接該JS不生效
白名單標簽屬性
data-instant
例：
可用在外部鏈接中 譬如：友鏈、子域名網站等
黑名單標簽屬性
data-no-instant
不想進行預加載的鏈接
帶有查詢字符串("?")的鏈接
全局允許 在<body>中添加data-instant-allow-query-string屬性
局部允許 在使用的標簽中添加?data-instant?屬性（和白名單屬性一樣）
僅預加載某些鏈接（白名單模式）
如果只想預加載特定的鏈接，請在<body>中添加一個data-instant-whitelist標簽，并通過向其添加data-instant屬性來標記要預加載的鏈接。
版權所有：重慶安菲科技有限公司
