結合 Google quicklink，react 項目實現頁面秒開

對於前端資訊比較敏感的同窗，可能這兩天已經據說了 GoogleChromeLabs/quicklink這個項目：它由 Google 公司著名開發者 Addy Osmani 發起，實現了：在空閒時間預獲取頁面可視區域內的連接，加快後續加載速度。若是你沒有據說過 Addy Osmani 大神的名號，但對於他的多篇演講或文章：

• The Cost Of JavaScript In 2018，

以及著做書籍：

• Learning JavaScript Design Patterns

等，也許你並不陌生。大神出品，必屬精品，Google 團隊 quicklink 項目一經推出便吸睛無數。

該庫面向原生 JavaScript，利用瀏覽器衆多特性，設計巧妙而實用。但是，若是咱們的項目基於 React/React Native，如何利用 quicklink，實現頁面秒開呢？相信不止一個開發者會有此疑問，該倉庫 issue 中便有一位巴基斯坦老兄問到：How to use with react-native?：

爲此，我實現了一個 react-quicklink-component，專門解決此問題：讓基於 React/React Native 的項目無縫對接到 quicklink。

---

開始以前，請容許我插播一條廣告～

從去年起，我和知名技術大佬 顏海鏡 開始了合著之旅，今年咱們共同打磨的書籍《React 狀態管理與同構實戰》終於正式出版了！這本書以 React 技術棧爲核心，在介紹 React 用法的基礎上，從源碼層面分析了 Redux 思想，同時着重介紹了服務端渲染和同構應用的架構模式。書中包含許多項目實例，不只爲用戶打開了 React 技術棧的大門，更能提高讀者對前沿領域的總體認知。

若是各位對圖書內容或接下來的內容感興趣，還望多多支持！文末有詳情，不要走開！

---

quicklink 究竟是什麼？實現原理解析

這個 WebPageTest demo 演示了 quicklink 的預獲取功能，它將頁面加載性能提升了 4 秒！ Youtube 視頻 見此處。

實現原理很簡單，quicklink 主要經過如下方式加快後續頁面的加載速度：

• 檢測視區中的連接（使用 Intersection Observer https://developer.mozilla.org...）
• 等待瀏覽器空閒（使用 requestIdleCallback https://developer.mozilla.org...）
• 檢查用戶是否處於慢速鏈接（使用 navigator.connection.effectiveType）或啓用了省流模式（使用 navigator.connection.saveData）
• 預獲取視區內的 URL（使用<link rel=prefetch>或 XHR）。 可根據請求優先級進行控制（若支持 fetch() 可進行切換）。

（引用自 jothy 翻譯）

該項目源碼實現也並不複雜，接下來咱們看 React 項目如何接入 quicklink~

react-quicklink-component 解密

由上分析可知，quicklink 須要預獲取視區內的 URLs，其實現方式是經過 document.querySelectorAll 方法遍歷相關節點的 a 標籤。而 React 項目開發時通常屏蔽 Dom 操做，爲此咱們須要使用 ref 特性獲取真實 Dom 節點，打通此環節後，即可以直接使用 quicklink 的 APIs，筆者實現的 react-quicklink-component 既是如此，同時採用了 render prop 的模式，使用很是簡單：

<Quicklink quicklink={options}>
  <Comp1 />
  ...
  <CompN />
</Quicklink>

Quicklink 組件核心代碼也並不複雜：

componentDidMount() {
    const quicklinkEle = this.quicklinkRef.current;
    quicklink({
      ...this.props.quicklink,
      el: quicklinkEle
    });
  }
  render() {
    return <div ref={this.quicklinkRef}>{this.props.children}</div>
  }

什麼是 render prop 模式呢？其實社區上已經有不少關於這種思想的內容，個人新書中亦有介紹，並圍繞 render prop 剖析了更多的 React 組件設計模式，這裏再也不贅述。

最後，react-quicklink-component PRs welcome！

Happy coding!

---

《React 狀態管理與同構實戰》這本書由我和前端知名技術大佬顏海鏡協力打磨，凝結了咱們在學習、實踐 React 框架過程當中的積累和心得。除了 React 框架使用介紹之外，着重剖析了狀態管理以及服務端渲染同構應用方面的內容。同時吸收了社區大量優秀思想，進行概括比對。

本書受到百度公司副總裁沈抖、百度資深前端工程師董睿，以及知名 JavaScript 語言專家阮一峯、Node.js 佈道者狼叔、Flarum 中文社區創始人 justjavac、新浪移動前端技術專家小爝、百度資深前端工程師顧軼靈等前端圈衆多專家大咖的聯協力薦。

有興趣的讀者能夠點擊這裏，瞭解詳情。也能夠掃描下面的二維碼購買。再次感謝各位的支持與鼓勵！懇請各位批評指正！