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。

快速上手：

舉個例子 🌰，你能夠在 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 的版本，測試從主頁導航到一個自動預獲取的文章所用時間。 結果代表預獲取版本加載速度更快。

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

相關項目

• 在用 Gatsby 嗎？ 如今能夠免費下載它了。它使用 Intersection Observer 預獲取視圖中的全部連接，本項目靈感亦來源於此。

• 想要更加數據驅動的方案嗎？ 參見 Guess.js。 它根據用戶上網方式，使用數據分析和機器學習來預獲取資源。 它還有 Webpack 和 Gatsby 的插件。

證書

受 Apache-2.0 開源許可證保護。

好文推薦：

JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 仍是 Supertest

JavaScript 極致性能追求：TC39 二進制 AST 提案

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

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