通过quicklink让我们突破性能瓶颈

2019-07-05 本文已影响0人三石青韦

什么是quicklink

它是谷歌开源又一个精品库，其官网是这么说的：

Faster subsequent page-loads by prefetching in-viewport links during idle time（通过空闲时间预加载视口中的links资源来让之后的页面加载更快）

听起来是一个很神奇的功能，那么它是如何工作的呢：

检测视口中的链接 (使用 Intersection Observer监控)
等待浏览器空闲 (使用 requestIdleCallback监控)
判断用户不是使用的慢网（如2G） (使用 navigator.connection.effectiveType) 或者有启用了数据缓存 (使用 navigator.connection.saveData)
预加载对应的URL (使用 <link rel=prefetch> 或者 XHR). 提供对请求优先级的一些控制 (如果支持可切换成fetch()).

怎么用quicklink

功能如此强大，那使用是不是会很麻烦呢？不，你错了，让我们来看看如何简单的来使用这个神奇的库吧。

安装

可以采用npm的方式：

npm install --save quicklink

或者
我们可以直接进行引用：https://unpkg.com/quicklink@1.0.0/dist/quicklink.umd.js

使用

quicklink 提供了几种使用的方式：
快速使用：

<!--首先引用umd模式的js -->
<script src="dist/quicklink.umd.js"></script>
<!-- 在任何时候都可以进行初始化 -->
<script>
quicklink();
</script>

你可以在load事件回调中来初始化。

<script>
window.addEventListener('load', () =>{
   quicklink();
});
</script>

ES Module 的引入：

import quicklink from "quicklink/dist/quicklink.mjs";
quicklink();

quicklink接口参数：

接口	描述	类型	默认值
el	在是口中需要被监控的容器外壳	dom节点	-
urls	进行预加载的静态URL数组（用来替换el属性配置的监控外壳）	Array	-
timeout	自定义的延迟时间，默认为requestIdleCallback，也可以自定义	Function	requestIdleCallback
priority	设置获取资源的优先级	boolean	false
origin	设置预加载资源的域，来保证任何域下都可以加载	Array	默认相同域
ignores	一个正则，函数或者Array，用于进一步的确定是否预取URL	RegExp、Function、Array	-

使用方法

先来段html代码：

<div  id="demo1"  class="screen">
    <h1>Basic demo</h1>
    <a href="../test/1.html">Link 1</a>
    我是第一个容器
    <a href="../test/2.html">Link 2</a>
</div>
<div class="screen">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, quos?
    <a href="../test/3.html">Link 3</a>
    <section id="stuff">
        <a href="../test/main.css">CSS</a>
    </section>
</div>
<div class="screen">
      <a href="../test/4.html">Link 4</a>
</div>

我们可以设置预加载的位置，这样可以视口中有很多资源时，也不会加载，只会当demo1容器到视口时才会加载。

let elm = document.getElementById('demo1');
quicklink({
    'el': elm
});

来看看我们的效果（不要在意错误，这只是个demo）：

使用el之后的效果

我们在来看看强制设置urls，这样就不会来判断视口位置了。

quicklink({
    urls: ['2.html','3.html', '4.js']
});

强制设置URL之后

默认为低优先级（priority为false）系统会使用prefetch。对于高优先级，会使用fetch()，或者XHR。

quicklink({ priority: false });

低优先级时

quicklink({ priority: true });

高优先级

源码解析

我们的主要目的是来研究一下这个库是如何来实现这些神奇的功能的。
整个项目中有比较重要API我们需要了解。

可以用来监控视口的功能API IntersectionObserver
可以提前预加载 prefetch

首先我们先监控整个浏览器的视口：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const link = entry.target;
      if (toPrefetch.has(link.href)) {
        observer.unobserve(link);
        prefetcher(link.href);
      }
    }
  });
});

当获取到需要提前预加载的资源文件URL之后，判断用户当前网络，如果是非2G网络时，我们才会进行资源预加载：

function prefetcher(url, isPriority, conn) {
  if (preFetched[url]) {
    return;
  }
  if (conn = navigator.connection) {
    // Don't prefetch if the user is on 2G. or if Save-Data is enabled..
    if ((conn.effectiveType || '').includes('2g') || conn.saveData) return;
  }

  // Wanna do something on catch()?
  return (isPriority ? highPriFetchStrategy : supportedPrefetchStrategy)(url).then(() => {
    preFetched[url] = true;
  });
};

当isPriority优先级为高时调用highPriFetchStrategy，优先级为低时调用supportedPrefetchStrategy。

highPriFetchStrategy

如果优先级为高时，首先我们会采用Fetch，如果不支持，则降级为XHR进行加载：

function highPriFetchStrategy(url) {
  return self.fetch == null
    ? xhrPrefetchStrategy(url)
    : fetch(url, {credentials: `include`});
}

supportedPrefetchStrategy

如果优先级为低时，我们会优先使用prefetch，如果不支持，会降级使用XHR进行加载：

const supportedPrefetchStrategy = support('prefetch')
  ? linkPrefetchStrategy
  : xhrPrefetchStrategy;

我们在来看看关键的2个函数 xhrPrefetchStrategy 和 linkPrefetchStrategy：

xhrPrefetchStrategy：函数中会直接使用get请求进行一起http请求：

function xhrPrefetchStrategy(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();

    req.open(`GET`, url, req.withCredentials=true);

    req.onload = () => {
      (req.status === 200) ? resolve() : reject();
    };

    req.send();
  });
}

linkPrefetchStrategy：我们会动态创建一个link，并且使用prefetch来进行pretch预加载：

function linkPrefetchStrategy(url) {
  return new Promise((resolve, reject) => {
    const link = document.createElement(`link`);
    link.rel = `prefetch`;
    link.href = url;

    link.onload = resolve;
    link.onerror = reject;

    document.head.appendChild(link);
  });
};

总结一下：

来了一个比较渣渣的流程图；

整体quicklink流程图