结合 Google quicklink,react 项目实现页面秒开

2018-12-18

对于前端资讯比较敏感的同学,可能这两天已经听说了 GoogleChromeLabs/quicklink这个项目:它由 Google 公司著名开发者 Addy Osmani 发起,实现了:在空闲时间预获取页面可视区域内的链接,加快后续加载速度。如果你没有听说过 Addy Osmani 大神的名号,但对于他的多篇演讲或文章:

以及著作书籍:

等,也许你并不陌生。大神出品,必属精品,Google 团队 quicklink 项目一经推出便吸睛无数。

该库面向原生 JavaScript,利用浏览器众多特性,设计巧妙而实用。可是,如果我们的项目基于 React/React Native,如何利用 quicklink,实现页面秒开呢?相信不止一个开发者会有此疑问,该仓库 issue 中便有一位巴基斯坦老兄问到:How to use with react-native?

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 主要通过以下方式加快后续页面的加载速度:

(引用自 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-componentPRs welcome!

Happy coding!


《React 状态管理与同构实战》这本书由我和前端知名技术大佬颜海镜合力打磨,凝结了我们在学习、实践 React 框架过程中的积累和心得。除了 React 框架使用介绍以外,着重剖析了状态管理以及服务端渲染同构应用方面的内容。同时吸取了社区大量优秀思想,进行归纳比对。

本书受到百度公司副总裁沈抖、百度资深前端工程师董睿,以及知名 JavaScript 语言专家阮一峰、Node.js 布道者狼叔、Flarum 中文社区创始人 justjavac、新浪移动前端技术专家小爝、百度资深前端工程师顾轶灵等前端圈众多专家大咖的联合力荐。

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

React 状态管理与同构实战

React 状态管理与同构实战

原文链接:segmentfault.com

上一篇:3D翻转卡片封装Vue组件
下一篇:小白在react+dva+antd中踩的一些坑
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部