結合 Google quicklink，react 專案實現頁面秒開
對於前端資訊比較敏感的同學，可能這兩天已經聽說了 ChromeLabs%252Fquicklink" target="_blank" rel="nofollow,noindex">GoogleChromeLabs/quicklink 這個專案：它由 Google 公司著名開發者 Addy Osmani 發起，實現了： 在空閒時間預獲取頁面可視區域內的連結，加快後續載入速度。
如果你沒有聽說過 Addy Osmani 大神的名號，但對於他的多篇演講或文章：
- The Cost Of JavaScript/">JavaScript In 2018 ，
以及著作書籍：
等，也許你並不陌生。大神出品，必屬精品，Google 團隊 quicklink 專案一經推出便吸睛無數。
該庫面向原生 JavaScript，利用瀏覽器眾多特性，設計巧妙而實用。
可是，如果我們的專案基於 React/React Native，如何利用 quicklink，實現頁面秒開呢？
相信不止一個開發者會有此疑問，該倉庫 issue 中便有一位巴基斯坦老兄問到： How to use with react-native?
為此， 我實現了一個 npmjs.com%252Fpackage%252Freact-quicklink-component" target="_blank" rel="nofollow,noindex">react-quicklink-component ，專門解決此問題：讓基於 React/React Native 的專案無縫對接到 Google quicklink。
開始之前，請允許我插播一條廣告～
從去年起，我和知名技術大佬顏海鏡開始了合著之旅，今年我們共同打磨的書籍 《React 狀態管理與同構實戰》 終於正式出版了！這本書以 React 技術棧為核心，在介紹 React 用法的基礎上，從原始碼層面分析了 Redux 思想，同時著重介紹了服務端渲染和同構應用的架構模式。書中包含許多專案例項，不僅為使用者打開了 React 技術棧的大門，更能提升讀者對前沿領域的整體認知。
如果各位對圖書內容或接下來的內容感興趣，還望多多支援！ 文末有詳情，不要走開！
quicklink 到底是什麼？實現原理解析
這個WebPageTest demo 演示了 quicklink 的預獲取功能，它將頁面載入效能提高了 4 秒！Youtube 視訊見此處。
實現原理很簡單 ，quicklink 主要通過以下方式加快後續頁面的載入速度：
- 檢測視區中的連結（使用 Intersection Observer API%252FIntersection_Observer_API%2525EF%2525BC%252589" target="_blank" rel="nofollow,noindex">developer.mozilla.org/en-US/docs/…
- 等待瀏覽器空閒（使用 requestIdleCallback developer.mozilla.org/en-US/docs/…
- 檢查使用者是否處於慢速連線（使用 navigator.connection.effectiveType）或啟用了省流模式（使用 navigator.connection.saveData）
- 預獲取視區內的 URL（使用或 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>
什麼是 render prop 模式呢？ 其實社群上已經有很多關於這種思想的內容，我的新書中亦有介紹，並圍繞 render prop 剖析了更多的 React 元件設計模式，這裡不再贅述。
最後， react-quicklink-component PRs welcome！
Happy coding!
《React 狀態管理與同構實戰》這本書由我和前端知名技術大佬顏海鏡合力打磨，凝結了我們在學習、實踐 React 框架過程中的積累和心得。**除了 React 框架使用介紹以外，著重剖析了狀態管理以及服務端渲染同構應用方面的內容。**同時吸取了社群大量優秀思想，進行歸納比對。
本書受到百度公司副總裁沈抖、百度資深前端工程師董睿，以及知名 JavaScript 語言專家阮一峰、Node.js 佈道者狼叔、Flarum 中文社群創始人 justjavac、新浪移動前端技術專家小爝、百度資深前端工程師顧軼靈等前端圈眾多專家大咖的聯合力薦。
有興趣的讀者可以點選這裡，瞭解詳情。也可以掃描下面的二維碼購買。再次感謝各位的支援與鼓勵！懇請各位批評指正！
https:// item.jd.com/12403508.ht ml?dist=jd (二維碼自動識別)
