摘要：文件路徑，上線后，絲絲潤(rùn)滑無(wú)痛無(wú)癢，完美第四個(gè)版本，可以做更多注意哦，重點(diǎn)來(lái)咯盡早加載是減少首屏?xí)r間的關(guān)鍵引申閱讀，直接把到里是個(gè)不錯(cuò)的方案。

所謂 File Prefetching 就是在一個(gè)頁(yè)面加載成功后，默默去預(yù)加載后續(xù)可能會(huì)被訪問(wèn)到的頁(yè)面的資源。   
前端資源預(yù)加載其實(shí)沒(méi)啥新鮮的，我們倒騰這個(gè)事情的過(guò)程卻是很有有意思也很有啟發(fā)性。

1、建一個(gè)獨(dú)立的頁(yè)面，里面索引了各種需要預(yù)加載的css、js，代碼類似下面這樣。

    
    ...其他需要預(yù)加載的css



    
    ...其他需要預(yù)加載的js

2、 在每個(gè)頁(yè)面加入一個(gè)iframe（一般通過(guò)base模板統(tǒng)一加），這樣每個(gè)頁(yè)面打開(kāi)的時(shí)候都會(huì)加載上面這個(gè)頁(yè)面。假設(shè)上面的頁(yè)面的url是 https://xxx.com/common/prefetching.html 那么我們每個(gè)頁(yè)面底部都有這么一行代碼：

要驗(yàn)證某個(gè)file prefetching的方案是否真的有效，無(wú)非就是以下幾步：
（假設(shè)A頁(yè)面使用了showcase_d0fbaaef124a8691398704216ccd469a.css，而B(niǎo)頁(yè)面不會(huì)）

讓chrome終端打開(kāi)的時(shí)候cache功能依舊有效

清空所有本地cache

打開(kāi)B頁(yè)面，在控制臺(tái)Networking里看prefetching.html以及附屬的資源文件是否被下載了

打開(kāi)A頁(yè)面，注意：是在地址欄里輸入A的網(wǎng)址然后回車，不要打開(kāi)A頁(yè)面后習(xí)慣性地按Command/Ctrl+R來(lái)刷新，不出意外，我們會(huì)看到如下圖這樣的結(jié)果：

這說(shuō)明，這2個(gè)css文件是從cache里讀的。如果Command/Ctrl+R來(lái)刷新頁(yè)面，我們會(huì)看到這樣的結(jié)果：

兩者的差別是，Command/Ctrl+R的時(shí)候，瀏覽器會(huì)從cache里找該靜態(tài)文件，如果找到了，會(huì)根據(jù)上次請(qǐng)求這個(gè)文件時(shí)得到的cache-control信息判斷該靜態(tài)文件是否已經(jīng)過(guò)期了，如果沒(méi)有，會(huì)以 if-modified-since、Etag 等信息作為 request headers 向服務(wù)器請(qǐng)求這個(gè)文件，服務(wù)器如果認(rèn)為文件沒(méi)有變過(guò)，會(huì)返回Http code為304，瀏覽器于是直接讀cache。具體不展開(kāi)啦，可以看 [《HTTP caching
》](https://developers.google.com/web/fundam... 和 《Understanding HTTP/304 Responses》。

讓chrome終端打開(kāi)的時(shí)候cache功能依舊有效：Chrome終端的配置里把Disable cache (while DevTools is open)的勾選去掉
清空所有cache：地址欄里輸入 chrome://settings/clearBrowserData 打開(kāi)后勾上 Cached images and files 點(diǎn) Clear browsing data
查看瀏覽器當(dāng)前cache的資源列表：chrome://cache/

目前看來(lái)，上面這個(gè) File Prefeching 的方案是有效的。不過(guò)這種是最簡(jiǎn)陋的試驗(yàn)版，存在幾個(gè)問(wèn)題：

prefetching.html 里的js會(huì)被執(zhí)行，然后不可避免地會(huì)有一堆js錯(cuò)誤 —— 看著難受~

通過(guò)iframe 加載 prefetching.html 會(huì)影響到當(dāng)前頁(yè)面相關(guān)資源的加載速度

每次打開(kāi)頁(yè)面都會(huì)加載一次 prefetching.html，雖然里面的靜態(tài)文件都已經(jīng)在第一次打開(kāi)的時(shí)候被cache住了不會(huì)重復(fù)下載，但無(wú)謂多一個(gè)請(qǐng)求終究是沒(méi)必要。

于是，我們上線使用的版本是這樣的：

1、有一段每個(gè)頁(yè)面都會(huì)被執(zhí)行到的js：

// 打開(kāi)一個(gè)iframe，下載之后頁(yè)面可能需要的js/css
setTimeout(function() {
    var lastOpenTime = 0;
    var nowTime = (new Date()).getTime();
    try {
        lastOpenTime = window.localStorage.getItem("staticIframeOpenTime");
    } catch (e) {}

    if (lastOpenTime > 0 && (nowTime - lastOpenTime < 24 * 3600 * 1000)) {
        // 24小時(shí)打開(kāi)一次iframe
        return;
    }

    var iframe = $("