摘要：等待瀏覽器空閑后執(zhí)行。使用方式參考鏈接源碼解析的入口函數(shù)接受傳入的配置參數(shù)，通過(guò)函數(shù)和默認(rèn)的配置選項(xiàng)合并。然后在回調(diào)中便利傳入的數(shù)組，如果數(shù)組中的元素包含在對(duì)象中，則取消對(duì)該元素的監(jiān)視，并對(duì)該標(biāo)簽元素所對(duì)應(yīng)的資源進(jìn)行預(yù)加載。

quicklink是一個(gè)js庫(kù)，可以預(yù)加載出現(xiàn)在視口的網(wǎng)頁(yè)鏈接，提高用戶體驗(yàn)。它的加載過(guò)程如下：
1.檢測(cè)網(wǎng)頁(yè)中的鏈接是否出現(xiàn)在視口中，等待鏈接出現(xiàn)在視口，執(zhí)行步驟2。
2.等待瀏覽器空閑后執(zhí)行3。
3.判斷當(dāng)前的網(wǎng)絡(luò)連接是否是2G，如果是則停止執(zhí)行，如果不是2G網(wǎng)絡(luò)，執(zhí)行步驟4。
4.預(yù)加載鏈接指向資源。

參考鏈接https://github.com/GoogleChro...

quicklink的入口函數(shù)接受傳入的配置參數(shù)，通過(guò)Object.assign函數(shù)和默認(rèn)的配置選項(xiàng)合并。接著執(zhí)行timeoutFn異步方法，該方法接收一個(gè)回調(diào)函數(shù)，在回調(diào)中主要邏輯如下：
如果傳入的options參數(shù)中有urls屬性，則直接執(zhí)行預(yù)加載，否則通過(guò)document.querySelectorAll方法獲取所有a標(biāo)簽元素的NodeList，然后便利該元素節(jié)點(diǎn)列表，并監(jiān)視該元素節(jié)點(diǎn)

observer.observe(link);

然后判斷該a元素對(duì)象的href屬性值所屬的域名是否被允許訪問(wèn)，如果被允許訪問(wèn)，繼續(xù)判斷該鏈接是否應(yīng)該被忽略，判斷邏輯如下：

if (!allowed.length || allowed.includes(link.hostname)) {
   // If there are any filters, the link must not match any of them
   isIgnored(link, ignores) || toPrefetch.add(link.href);
}

如果鏈接沒(méi)有被忽略，則將該節(jié)點(diǎn)的href屬性值加入到toPrefetch中

const toPrefetch = new Set();
toPrefetch.add(link.href);

總的代碼邏輯如下

export default function (options) {
  options = Object.assign({
    timeout: 2e3,
    priority: false,
    timeoutFn: requestIdleCallback,
    el: document,
  }, options);

  observer.priority = options.priority;

  const allowed = options.origins || [location.hostname];
  const ignores = options.ignores || [];

  options.timeoutFn(() => {
    // If URLs are given, prefetch them.
    if (options.urls) {
      options.urls.forEach(prefetcher);
    } else {
      // If not, find all links and use IntersectionObserver.
      Array.from(options.el.querySelectorAll("a"), link => {
        observer.observe(link);
        // If the anchor matches a permitted origin
        // ~> A `[]` or `true` means everything is allowed
        if (!allowed.length || allowed.includes(link.hostname)) {
          // If there are any filters, the link must not match any of them
          isIgnored(link, ignores) || toPrefetch.add(link.href);
        }
      });
    }
  }, {timeout: options.timeout});
}

上面通過(guò)observer.observe(link)監(jiān)視節(jié)點(diǎn)元素，其中observer是IntersectionObserver對(duì)象的實(shí)例，被監(jiān)聽的節(jié)點(diǎn)對(duì)象出現(xiàn)在視口時(shí)，會(huì)執(zhí)行new操作時(shí)傳入的回調(diào)函數(shù)，并將出現(xiàn)在視口的節(jié)點(diǎn)對(duì)象通過(guò)數(shù)組的形式傳給該回調(diào)。然后在回調(diào)中便利傳入的數(shù)組，如果數(shù)組中的元素包含在toPrefetch對(duì)象中，則取消對(duì)該元素的監(jiān)視，并對(duì)該a標(biāo)簽元素所對(duì)應(yīng)的資源進(jìn)行預(yù)加載。

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);
      }
    }
  });
});

如果瀏覽器支持requestIdleCallback，則使用原生的函數(shù)，如果不支持，則使用setTimeout函數(shù)做ployfill。

const requestIdleCallback = requestIdleCallback ||
  function (cb) {
    const start = Date.now();
    return setTimeout(function () {
      cb({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50 - (Date.now() - start));
        },
      });
    }, 1);
  };

export default requestIdleCallback;

預(yù)加載策略主要有三種

1. prefetch

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);
  });
};

2.ajax加載

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();
  });
}

3.Fetch請(qǐng)求加載

function highPriFetchStrategy(url) {
  // TODO: Investigate using preload for high-priority
  // fetches. May have to sniff file-extension to provide
  // valid "as" values. In the future, we may be able to
  // use Priority Hints here.
  //
  // As of 2018, fetch() is high-priority in Chrome
  // and medium-priority in Safari.
  return self.fetch == null
    ? xhrPrefetchStrategy(url)
    : fetch(url, {credentials: `include`});
}

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;
  }

將上面三種預(yù)加載方法封裝成函數(shù)，暴露給外部使用

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

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;
  });
};

export default prefetcher;