结合 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 的项目无缝对接到 Google quicklink。

---

开始以前，请容许我插播一条广告～

从去年起，我和知名技术大佬 颜海镜 开始了合著之旅，今年咱们共同打磨的书籍 《React 状态管理与同构实战》 终于正式出版了！这本书以 React 技术栈为核心，在介绍 React 用法的基础上，从源码层面分析了 Redux 思想，同时着重介绍了服务端渲染和同构应用的架构模式。书中包含许多项目实例，不只为用户打开了 React 技术栈的大门，更能提高读者对前沿领域的总体认知。

若是各位对图书内容或接下来的内容感兴趣，还望多多支持！文末有详情，不要走开！

---

quicklink 究竟是什么？实现原理解析

这个 WebPageTest demo 演示了 quicklink 的预获取功能，它将页面加载性能提升了 4 秒！ Youtube 视频 见此处。

实现原理很简单，quicklink 主要经过如下方式加快后续页面的加载速度：

• 检测视区中的连接（使用 Intersection Observer 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>
复制代码

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、新浪移动前端技术专家小爝、百度资深前端工程师顾轶灵等前端圈众多专家大咖的联协力荐。

有兴趣的读者能够点击这里，了解详情。也能够扫描下面的二维码购买。再次感谢各位的支持与鼓励！恳请各位批评指正！