JS 和 CSS 的位置對其他資源加載順序的影響

lindroid 發(fā)布于2019-08-21 10:24 / 2092人閱讀

摘要：克軍做了一系列測試和的順序關(guān)系，給出了現(xiàn)象和結(jié)論，但未給出原因。比如在下的瀑布圖是黃色條是的，可以看出的延時下載是由定律一決定的。克軍的其他結(jié)論都是對的，不多說。

克軍做了一系列測試：js和css的順序關(guān)系，給出了現(xiàn)象和結(jié)論，但未給出原因。

JS 和 CSS 在頁面中的位置，會影響其他資源（指 img 等非 js 和 css 資源）的加載順序，究其原因，有三個值得注意的點：

JS 有可能會修改 DOM.典型的，可能會有 document.write. 這意味著，在當前 JS 加載和執(zhí)行完成前，后續(xù)所有資源的下載有可能是沒必要的。這是 JS 阻塞后續(xù)資源下載的根本原因。

JS 的執(zhí)行有可能依賴最新樣式。比如，可能會有 var width = $("#id").width(). 這意味著，JS 代碼在執(zhí)行前，瀏覽器必須保證在此 JS 之前的所有 css（無論外鏈還是內(nèi)嵌）都已下載和解析完成。這是 CSS 阻塞后續(xù) JS 執(zhí)行的根本原因。

現(xiàn)代瀏覽器很聰明，會進行 prefetch 優(yōu)化。性能是如此重要，現(xiàn)代瀏覽器在競爭中，在 UI update 線程之外，還會開啟另一個線程，對后續(xù) JS 和 CSS 提前下載（注意，僅提前下載，并不執(zhí)行）。有了 prefetch 優(yōu)化，這意味著，在不存在任何阻塞的情況下，理論上 JS 和 CSS 的下載時機都非常優(yōu)先，和位置無關(guān)。

以上三點可簡述為三條基本定律：

定律一：資源是否下載依賴 JS 執(zhí)行結(jié)果。

定律二：JS 執(zhí)行依賴 CSS 最新渲染。

定律三：現(xiàn)代瀏覽器存在 prefetch 優(yōu)化。

有了這三條定律，再來看克軍的測試，就很清晰了：

  a,b – head里出現(xiàn)外聯(lián)js，無論如何放，css文件都不能和body里的請求并行

根據(jù)定律一和定律三，可以知道上面的結(jié)論不夠正確。比如：

在 Chrome 下的瀑布圖是：

黃色條是 js 的，可以看出 img 的延時下載是由定律一決定的。

定律三則決定了所有 js/css 都是并行開始下載的。在 Firefox 10 下，prefetch 非常強悍，對 img 也會預加載，瀑布圖如下：

調(diào)整一下 sleep 時間，還可以觀察到定律二的威力：

瀑布圖立刻發(fā)生了變化：

因為定律一，決定 img 的下載在 js 執(zhí)行后。又因為定律二，決定 js 的執(zhí)行在第一個 css 后。于是最后在瀑布圖上體現(xiàn)出來，就是 img 的下載在第一個 css 后。

再來看克軍的第二個結(jié)論：

  c – head里的內(nèi)聯(lián)js只要在所有外聯(lián)css前面，css文件可以和body里的請求并行（圖2）
  
  d – head里的內(nèi)聯(lián)js只要在任一外聯(lián)css后面，css文件就不能和body里的請求并行（圖1）

這個是定律二的威力。結(jié)論 c 是正確的，因為沒有 css 會影響 js 的執(zhí)行。結(jié)論 d 則不夠正確。img 等其他資源，會在 js 前面的 css 下載完成后，以及 js 執(zhí)行后，立刻開始下載。與頭部中，js 位置之后的 css 沒關(guān)系。

克軍的其他結(jié)論都是對的，不多說。

注意1：Firefox 10 的 prefetch 有點奇怪，有時會對 img 進行 prefetch，有時則不會。有興趣的可以進一步尋找規(guī)律。

注意2：上面的三個定律，是黑盒猜測，有興趣的可以去閱讀瀏覽器的源碼，應(yīng)該能找到更深層次的原因。

注意3：本文沒有考慮 defer, async 屬性的影響，這是另一個故事。

瀏覽器在迅速發(fā)展，很多總結(jié)，特別是書籍上的，很難與時俱進。大家應(yīng)該像克軍學習，多測試，多發(fā)現(xiàn)，這樣得來的知識，才不會過時。這篇博客的總結(jié)，也肯定在未來甚至就在現(xiàn)在，已經(jīng)存在錯誤。這些都無所謂，關(guān)鍵是要懂得測試的方法和分析的思路，有了“漁”，才能更好地探求和擁有“魚”。

轉(zhuǎn)自歲月如歌