Quicklink does seconds for your pages

Article by Quicklink Group

Translator: UC International R&D Jothy

Write in the front: welcome to the “UC International technology” public number, we will provide you with client, server, algorithm, test, data, front-end and other related high-quality technical articles, not limited to original and translation.

You can pre-obtain links in the viewport of the page at idle time to speed up subsequent loading.

• The links in the detection area (using the Intersection computes the Observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

• Waiting for browser idle (using requestIdleCallback https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback).

• 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 in the view (using or XHR). Can be controlled by request priority (toggle if FETCH () is supported).

The aim of this project is to provide a solution for websites that pre-capture links in the user’s viewport while keeping them extremely small (minified/gzipped after <1KB).

npm install --save quicklinkCopy the code

Or from https://unpkg.com/quicklink.

After initialization, QuickLink will automatically prefetch the link URL in the viewport at idle time.

Quick start:

For example 🌰, you can initialize after the load method fires:

Or import the ES module:

The above configuration applies to multi-page websites. A single page application can be paired with a Router using QuickLink:

• After entering the new routing address, call QuickLink ()

• Calling QuickLink () for a specific DOM element/component

• Call QuickLink ({urls: […]) }), and pass in a custom URL collection for prefetching

• El: Specifies the viewport of the DOM element to be preacquired

• Urls: Pre-obtained static URL array (if this configuration is not empty, it will not detect links to document or DOM elements in the viewport)

• Timeout: indicates the timeout integer set for requestIdleCallback. The browser must prefetch (in milliseconds) before this, and the default is 2 seconds.

• TimeoutFn: Specifies the timeout handling function. The default value is requestIdleCallback. Can also be replaced with networkIdleCallback a custom function (https://github.com/pastelsky/network-idle-callback, see the demo)

• Priority: A Boolean value specifying the priority of the fetch. The default is false. If set to true will attempt to use the FETCH () API (instead of rel = prefetch)

To explore:

• Supports resource extension detection and access to high-quality resources using rel=preload

• Use Priority Hints importance to tip (https://github.com/WICG/priority-hints)

quicklink:

• A very small rollback of requestIdleCallback

• Support for IntersectionObserver is required (see CanIUse). We recommend using services like Polyfill. IO to selectively implement this functionality:

  
  

Or, please see the Intersection computes the Observer polyfill (https://github.com/w3c/IntersectionObserver/tree/master/polyfill).

CanIUse：https://caniuse.com/#feat=intersectionobserver

Customize the timeout period for the prefetch operation

The default timeout is 2 seconds (via requestIdleCallback), here we rewrite it to 4 seconds:

Sets the DOM element used to detect links

The default value is document.

Custom prefetch URL array

If you want to specify a list of static urls to be used for pre-fetching, rather than within the viewport, you can use custom urls.

Sets the request priority for the prefetch operation

The default is low priority (rel=prefetch or XHR). For high priority (priority: true) operations, try to use fetch() or step back to XHR.

Quicklink provides progressive enhancement for pre-fetch, which is supported across browsers as follows:

• Not using Polyfills: Chrome, Firefox, Edge, Opera, Android Browser, Samsung Internet support

• Use the Intersection Observer Polyfill (about 6KB after gzipped/minified) : Safari, IE9+ support

Some functions support layered implementations. That is, if {priority: true} and fetch are not available, XHR will be used.

Progressive enhancement: https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

Quicklink includes a preacquisitor that can be imported separately into other projects. Once quickLink has been installed as a dependency, you can use it as follows:

For the demonstration, we deployed a Google Blog on Firebase, followed by another version that added Quicklink to the home page to test the time it took to navigate from the home page to an automatically pre-fetched article. The results show that the preacquired version loads faster.

Please note: This is by no means an exhaustive test of the advantages and disadvantages of this technique, but rather a demonstration of the potential improvements that this approach could bring. Your own implementation may vary.

• Is Gatsby in use? It can now be downloaded for free. The project was inspired by the use of the Intersection Observer to precapture all links in the view.

• Want a more data-driven approach? See Guess. Js. It uses data analysis and machine learning to pre-capture resources based on how users surf the Web. It also has Webpack and Gatsby add-ons.

Protected under the Apache-2.0 open source license.

Good article recommendation:

Which javascript HTTP request library is strong? Axios, Request, Superagent, Fetch or Supertest

JavaScript Extreme performance Pursuit: TC39 Binary AST proposal

UC Technology International is committed to sharing high quality technical articles with you

Welcome to follow our official account and share the article with your friends