关于前端资讯比较敏感的同砚，能够这两天已听说了 GoogleChromeLabs/quicklink这个项目：它由 Google 公司有名开辟者 Addy Osmani 提议，完成了：在余暇时候预猎取页面可视区域内的链接，加速后续加载速率。假如你没有听说过 Addy Osmani 大神的名号，但关于他的多篇演讲或文章：
以及著作书本：
等，或许你并不生疏。大神出品，必属佳构，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、新浪挪动前端手艺专家小爝、百度资深前端工程师顾轶灵等前端圈浩瀚专家大咖的联协力荐。
有兴致的读者能够点击这里，相识概况。也能够扫描下面的二维码购置。再次谢谢列位的支撑与勉励！恳请列位批评指正！
