For students front-end information is sensitive, perhaps this two days have heard GoogleChromeLabs/quicklink: this project it by Google’s famous developers Addy Osmani says, has realized: Prefetch links in the visible area of the page during idle time to speed up subsequent loading. If you have not heard the name of The Great God Addy Osmani, but for his many speeches or articles:

  • The Cost Of JavaScript In 2018,

And books:

  • Learning JavaScript Design Patterns

Wait, maybe you are familiar. The Google team’s QuickLink project attracted a lot of attention once it was launched.

The library is designed for native JavaScript and takes advantage of many features of the browser. However, if our project is based on React/React Native, how to use QuickLink to enable the page to open in seconds? I’m sure more than one developer will have this question. In the warehouse issue, a Pakistani dude asked: How to use with React-native?

To that end, I implemented onereact-quicklink-componentReact/React Native projects seamlessly connect to Google QuickLink.

Before we begin, please allow me to interrupt with a commercial

Last year, YAN Haijing and I started our co-writing journey. This year, the book React State Management and Isomorphism Combat, which we worked on together, was finally published. The core of this book is the React stack. On the basis of introducing the use of React, it analyzes the idea of Redux from the source level, and focuses on the architecture mode of server-side rendering and homogeneous application. The book contains many project examples that not only open the door to the React stack, but also improve the reader’s overall understanding of the frontier.

If you are interested in the book content or the following content, please support us! More at the end of this article, don’t go away!

What exactly is QuickLink? Analysis of implementation principle

This WebPageTest demo demonstrates quickLink’s pre-fetch capability, which improves page load performance by 4 seconds! The Youtube video is here.

Quicklink uses the following methods to speed up the loading of subsequent pages:

  • Check links in the viewport (use Intersection Observer developer.mozilla.org/en-US/docs/…

  • Wait for the browser to be idle (use requestIdleCallback developer.mozilla.org/en-US/docs/…

  • Check whether the user is in a slow connection (using the navigator. Connection. EffectiveType) or enabled province flow mode (using the navigator. Connection. SaveData)

  • Prefetch the URL of the viewport (using or XHR). This can be controlled based on the priority of the request (toggle if fetch() is supported).

(Translated by Jothy)

The React project uses quickLink to connect to quickLink

The react – quicklink – component

Known from the analysis of the quicklink need perfecting URLs in the area, the implementation way is through the document. The querySelectorAll method to traverse all the nodes associated a label. React project development usually blocks Dom operations, so we need to use the REF feature to obtain real Dom nodes. After this process is through, we can directly use quickLink APIs. The react-Quicklink-Component implemented by the author does this and uses render Prop mode, which is very simple to use:

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

The Quicklink component core code is not complicated either:

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

What is Render Prop mode? There is already a lot of discussion about this idea in the community, as well as in my new book, which dissects more React component design patterns around Render Prop.

Finally, react-Quicklink -component PRs Welcome!

Happy coding!

React State Management and Isomer Combat was jointly polished by Yan Haijing, a well-known technology guru in the front end, and condensed our accumulation and experience in the process of learning and practicing React framework. ** In addition to the React framework usage introduction, focuses on the analysis of state management and server rendering isomorphism application content. ** has also absorbed a large number of excellent ideas from the community and summarized and compared.

The book was written by Baidu vice President Shen Dou, Baidu senior front end engineer Dong Rui, Ruan Yifeng, a well-known expert on JavaScript language, Wolf Shu, a nojue advocate, JustJavac, the founder of Flarum Chinese community, Xiaojue, a technical expert on sina mobile, gu Yiling, a senior front-end engineer of Baidu, and other experts in the front-end area of Jue.

Interested readers can click here for details. You can also scan the QR code below to buy. Thank you again for your support and encouragement! Please criticize and correct!