Instant.page是一個免費的開源庫，它使用即時預載入，這意味著它會在使用者點選頁面之前預載入頁面。僅當使用者很有可能訪問頁面時才會預載入頁面，並且僅預載入HTML，尊重您的使用者和伺服器的頻寬和CPU。它使用被動事件偵聽器，以便您的頁面保持流暢，並且在使用者啟用資料保護程式時不會預載入。
即時頁面功能可讓您在使用者將滑鼠懸停在連結上後在後臺自動預取URL。這導致幾乎瞬時的載入時間，並改善了使用者體驗和感知效能（網站感覺有多快）。我們利用Alexandre Dieulot開發的Instant.page庫。
<link href="https://domain.com/post">
預取的工作原理
就伺服器和移動裝置的效能提升和低利用率而言，以上是最佳組合。該功能尊重您的移動裝置（Android、iPhone）是否啟用了資料保護程式或低資料模式。如果開啟，則不會預載入任何內容。
由於此功能適用於滑鼠懸停，因此不會顯示在速度測試工具上。但我們鼓勵您在啟用後點選您的網站。你應該能感覺到不同！
亞馬遜和其他公司發現，消除100毫秒的延遲可以提高1%的銷售額。但是網路上的延遲很難克服。
Instant.page使用即時預載入——它在使用者點選頁面之前預載入頁面。
（1）桌面端
在使用者點選連結之前，他們將滑鼠懸停在該連結上。當使用者懸停65毫秒時，有二分之一的機會點選該連結，因此instant.page此時開始預載入，頁面預載入平均超過300毫秒。
另一種選擇是在使用者開始按下滑鼠而不預載入時載入頁面。這使得未使用的請求為零，同時仍將頁面載入平均提高了80毫秒。
您還可以在懸停時或在連結可見時立即預載入，並在使用者開始按下滑鼠時觸發點選，從而使您的頁面成為世界上最快的頁面。
（2）移動端
使用者在釋放之前開始觸控他們的顯示器，平均留出90毫秒讓頁面預載入。
另一種選擇是在連結可見時立即預載入連結。
欺騙大腦
人腦將不到100毫秒的動作視為瞬間。因此，instant.page讓您的頁面即使在3G上也感覺即時（假設您的頁面渲染速度很快）。
輕鬆使用您的伺服器和使用者的資料計劃
僅當使用者很有可能訪問頁面時才會預載入頁面，並且僅預載入HTML ，尊重您的使用者和伺服器的頻寬和CPU。
它使用被動事件偵聽器和requestIdleCallback以使您的頁面保持流暢。它尊重資料保護模式。它是1kB並在其他所有內容之後載入。它是免費和開源的（MIT許可證）。
具有資料屬性的附加選項
您可以使用以下data-instant屬性啟用即時頁面的其他選項。只需將這些屬性中的任何一個新增到文件中的<body>標記，剩下的就交給我們了。
您可以在instant.page瞭解更多關於這些不同屬性的作用。有關將其中一些屬性新增到<body>標記的一些方法，請參見下文。
data-instant-allow-query-string data-instant-allow-external-links data-instant-whitelist data-instant-intensity="mousedown" data-instant-intensity="mousedown-only" data-instant-intensity="150" data-instant-intensity="viewport" data-instant-intensity="viewport-all" data-instant-mousedown-shortcut
頁面載入後新增JavaScript
第一種方法是在頁面載入結束時觸發JavaScript。可以將以下程式碼新增到WPTurbo中的頁尾程式碼框中。
假設您想更改指令碼在預載入前等待多長時間（以毫秒為單位）的資料強度時間。您可以像這樣新增它：
<script type='text/javascript'>
document.body.setAttribute('data-instant-intensity', '150');
</script>
一次只能使用一個data-instant-intensity屬性，但您可以將其與其他屬性混合搭配。因此，例如，這將起作用：
<script type='text/javascript'>
document.body.setAttribute('data-instant-intensity', '150');
document.body.setAttribute('data-instant-allow-external-links', 'true');
</script>
注意：上述方法會向您的站點新增一個額外的請求。
與body標籤合併
第二種方法是在呈現頁面時合併現有body標記中的屬性。這不需要額外的請求。可以將以下程式碼新增到 WPTurbo 中的頁尾程式碼框中。這是一個例子：
<body data-instant-intensity='mousedown' data-instant-allow-external-links > </body>
預載入時間設定
預設情況下，instant.page在懸停連結後以及移動使用者開始觸控其顯示屏時預載入65毫秒。還有其他選擇。
按下滑鼠時預載入
要在使用者開始按下滑鼠按鈕時載入頁面，在釋放它之前，將其data-instant-intensity="mousedown"作為屬性新增到<body>。
頁面預載入平均需要80毫秒。
要在桌面上以這種方式使用而不是在移動裝置上預載入，請使用data-instant-intensity="mousedown-only".
調整懸停延遲
對於一些具有大量點選目標的網站，例如一些電子商務網站，65毫秒規則不適用：它會為每個訪問的頁面預載入兩次以上。
要增加懸停延遲，請在屬性中傳遞毫秒數，例如150ms: data-instant-intensity="150"。
或者，如果您不關心提出很多請求，則可以減少它。
在連結可見後立即預載入連結
在小型移動裝置（例如智慧手機）上，如果您希望您的頁面在更多情況下是即時的，您可以在連結可見時立即預載入它們。
為此，請將data-instant-intensity="viewport"其作為屬性新增到<body>。
"viewport-all"如果您不擔心發出大量請求，您也可以使用 來在其他外形尺寸上執行此操作。
請注意，如果使用者使用2G或啟用了資料保護程式，它將回退到使用預設選項。
按下滑鼠時觸發點選
如果您想更快地觸發點選，請將data-instant-mousedown-shortcut其作為屬性新增到<body>。請注意，這可能與現有指令碼衝突。
（此功能從v5.1開始是可選的，在5.0中預設啟用，您需要使用data-instant-no-mousedown-shortcut它來禁用它。）
未預載入的頁面
預設情況下，不會預載入URL中帶有查詢字串（“？”）的頁面，因為它們有時會觸發操作（例如登出或刪除某些內容）。
使用查詢字串將頁面列入白名單
如果您想讓所有帶有查詢字串的頁面都被預載入，data-instant-allow-query-string請在<body>中新增一個屬性。
如果您只想允許預載入帶有查詢字串的選擇連結，請為其新增一個data-instant屬性：
<a href="articles?page=2" data-instant>Page 2</a>
黑名單頁面
要手動將觸發操作的連結列入黑名單，data-no-instant請為其新增屬性：
<a href="logout?token=f2d2650ce6" data-no-instant>Log out</a>
這主要在您使用時使用data-instant-allow-query-string，否則預設情況下帶有查詢字串的連結已經被列入黑名單。
外部連結
預設情況下不預載入外部連結，以允許它們都data-instant-allow-external-links向<body>新增屬性。
要僅允許某些外部連結，data-instant請為其新增屬性。
僅預載入部分連結（白名單模式）
如果您只想預載入特定連結，data-instant-whitelist請在<body>中新增a並通過向連結新增data-instant屬性來標記要預載入的連結。
內容攔截器
出於可疑的原因，預取被某些內容攔截器（例如uBlock Origin）視為侵犯隱私。請務必在您的網站上禁用內容攔截器以檢視正在發出的預載入請求。
Firefox中的uBlock Origin完全禁用預取；如果您使用它，您需要暫時完全禁用擴充套件程式，而不僅僅是為您的站點關閉它。
這隻會影響使用EasyPrivacy列表的內容攔截器的使用者。它適用於AdBlock；而uBlock Origin的使用者是少數。如果您想讓instant.page為您網站上具有隱私內容攔截器的使用者工作，您可以自行託管該指令碼。
技術細節
使用 <link href=”url “> 完成預載入。
原始碼有200行可讀。
瀏覽器支援
Instant.page是漸進式增強——對不支援它的瀏覽器沒有影響。
Chrome和基於Chromium的瀏覽器從61版（2017年9月釋出）開始全面支援。
Firefox支援<link>（從2006年開始！），但如果頁面沒有被快取（這是一個開放的錯誤），它將重新下載頁面。
不相容的瀏覽器
Safari 13.0支援 <link> 但預設禁用。希望它將在2020年9月在Safari 14.0中啟用。
UC瀏覽器不支援模組，因為它基於Chromium 57。基於Chromium 69的支援模組的新版本於2018年10月宣佈，但尚未釋出。
安全CDN
Instant.page的指令碼由Cloudflare Workers託管，因此沒有伺服器可以入侵。
此外，它使用子資源完整性讓現代瀏覽器驗證檔案未被篡改。它作為一個模組載入，因此大多數舊瀏覽器不會執行它。
自託管
也可以自己託管指令碼。下載最新版本，然後在</body>之前新增一個模組指令碼標籤：
<script src="instantpage-5.1.1.js" type="module" defer></script>
你也可以通過npm安裝它：
npm i instant.page
歷史
在hover和touchstart上預載入網頁的想法來自我的一箇舊庫InstantClick，它於2014年1月推出，它使用Ajax和history.pushState而不是<link>，將網站轉換為單一的頁面應用。它使網站更加流暢，但需要額外的工作。
不幸的是，InstantClick主要只是一個概念證明，因為它沒有很好的文件。
Google在2018年12月釋出的quicklink會在連結顯示後立即預載入帶有<link>的連結，這清楚地表明我應該專注於構建一個“精簡”、更易於使用的InstantClick版本，即Instant.page，於2019年2月推出。
未來相關專案
InstantClick提供了最流暢的體驗，同時仍然不需要像框架一樣多的工作（提供較少的結果），所以我正在考慮在2020年晚些時候再次開發它。它將重新命名為“instant.page extra”。
評論留言
脣槍舌劍 (1)
九凌网络
2022.8.5 15:08
确实，网站的加载速度一定程度上决定了用户的去留，这篇文章非常有用，感谢分享