quicklink 為你的頁面實現秒開

Firefox · 發表 2018-12-13 23:53:40

摘要：原文作者：quicklink Group 譯者：UC 國際研發 Jothy 寫在最前：歡迎你來到“UC國際技術”公眾號，我們將為大家提供與客戶端、服務端、演算法、測試、資料、前端等相關的高質量技術文章，不限於原創與翻譯。一句話介紹 quicklink 可以在空閒時間預獲...

原文作者：quicklink Group

譯者：UC 國際研發 Jothy

寫在最前：歡迎你來到“UC國際技術”公眾號，我們將為大家提供與客戶端、服務端、演算法、測試、資料、前端等相關的高質量技術文章，不限於原創與翻譯。

一句話介紹 quicklink

可以在空閒時間預獲取頁面可視區域（以下簡稱視區）內的連結，加快後續載入速度。

工作原理

Quicklink 通過以下方式加快後續頁面的載入速度：

檢測視區中的連結 （使用 Intersection Observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）
等待瀏覽器空閒 （使用 requestIdleCallback https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback）
檢查使用者是否處於慢速連線 （使用 navigator.connection.effectiveType ）或啟用了省流模式（使用 navigator.connection.saveData ）
預獲取視區內的 URL （使用 <link rel=prefetch> 或 XHR）。可根據請求優先順序進行控制（若支援 fetch() 可進行切換）。

開發原因

該專案旨在為網站提供一套解決方案，預獲取處於使用者視區中的連結，同時保持極小的體積（ minified/gzipped 後 <1KB ）。

安裝方法

node 或 npm 使用者：

npm install --save quicklink複製程式碼

或者從 https://unpkg.com/quicklink 獲取。

用法

初始化後，quicklink 將在閒時自動預獲取處於視區內的連結 URL。

快速上手：

舉個例子 :chestnut:，你可以在 load 方法觸發之後進行初始化：

或者匯入 ES 模組：

以上配置適用於多頁網站。單頁應用可以搭配 router 使用 quicklink：

進入新路由地址後，呼叫 quicklink()
針對特定 DOM 元素/元件呼叫 quicklink()
呼叫 quicklink({urls：[...]}) ，傳入自定義 URL 集合進行預獲取

API

quicklink 接受帶有以下引數的 option 物件（可選）：

el ：指定需要預獲取的 DOM 元素視區
urls ：預獲取的靜態 URL 陣列（若此配置非空，則不會檢測視區中 document 或 DOM 元素的連結）
timeout ：為 requestIdleCallback 設定的超時整數。瀏覽器必須在此之前進行預獲取（以毫秒為單位），預設取 2 秒。
timeoutFn ：指定超時處理函式。預設為 requestIdleCallback 。也可以替換為 networkIdleCallback 等自定義函式（https://github.com/pastelsky/network-idle-callback，詳見 demo）
priority ：布林值，指定 fetch 的優先順序。預設為 false 。若配置為 true 將會嘗試使用 fetch() API（而非 rel = prefetch）

待探索：

支援資源副檔名檢測及使用 rel=preload 獲取高優資源
使用 Priority Hints 進行重要性提示（https://github.com/WICG/priority-hints）

Polyfills

quicklink :

requestIdleCallback 的一個非常小的回退
需要支援 IntersectionObserver（請參閱 CanIUse）。我們推薦使用 Polyfill.io 等服務選擇性地實現此功能：

或者，請參見 Intersection Observer polyfill（https://github.com/w3c/IntersectionObserver/tree/master/polyfill）。

CanIUse：https://caniuse.com/#feat=intersectionobserver

示例

為預獲取操作自定義超時時間

預設超時時間為 2 秒（通過 requestIdleCallback ），這裡我們重寫為 4 秒：

設定用於檢測連結的 DOM 元素

預設值為 document 。

自定義預獲取 URL 陣列

如果你想指定用於預獲取的靜態 URL 列表，而不是視區內的，你可以使用自定義 URL。

為預獲取操作設定請求優先順序

預設為低優先順序（ rel=prefetch 或 XHR）。對於高優先順序（ priority: true ）的操作，嘗試使用 fetch() 或退階使用 XHR。

瀏覽器支援

quicklink 提供的預獲取是漸進增強的（progressive enhancement），跨瀏覽器支援如下：

不使用 polyfills 情況：Chrome，Firefox，Edge，Opera，Android Browser，Samsung Internet 支援
使用 Intersection Observer polyfill（gzipped/minified 後大約 6KB）：Safari，IE9+ 支援

某些功能支援分層實現。即如果 {priority：true} 和 fetch 不可用，則將使用 XHR。

漸進增強：https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

直接使用 prefetcher（預獲取器）

quicklink 包含一個預獲取器，可以單獨匯入其他專案中。將 quicklink 作為依賴項安裝後，可以按如下方式使用它：

Demo

這個 WebPageTest demo（地址：https://www.webpagetest.org/video/view.php?id=181212_4c294265117680f2636676721cc886613fe2eede&data=1）演示了 quicklink 的預獲取功能，它將頁面載入效能提高了 4 秒！ Youtube 視訊見本文開頭處。

為了做演示，我們在 Firebase 上部署了一個 Google Blog，接著部署了另一個在主頁添加了 quicklink 的版本，測試從主頁導航到一個自動預獲取的文章所用時間。結果表明預獲取版本載入速度更快。

請注意：這絕不是對這項技術優缺點的詳盡測試，只是演示了該方法可能帶來的潛在改進。你自己的實現可能不盡相同。

證書

受 Apache-2.0 證書保護。

好文推薦：

OA%3D%3D%26amp%3Bmid%3D2247484557%26amp%3Bidx%3D1%26amp%3Bsn%3D48afccb06135ea45b2a6a7262ccd84fa%26amp%3Bchksm%3Dfb47c0f8cc3049ee09c7c95daca35fa6c2eeae181eb024093d4dfe557209f6d8914013015bd5%26amp%3Bscene%3D21%23wechat_redirect" target="_blank" rel="nofollow,noindex">JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 Supertest

JavaScript/">JavaScript 極致效能追求：TC39 二進位制 AST 提案

“UC國際技術”致力於與你共享高質量的技術文章

歡迎關注我們的公眾號、將文章分享給你的好友