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

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

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

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

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

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

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

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

以上三點(diǎn)可簡(jiǎn)述為三條基本定律：

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

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

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

有了這三條定律，再來(lái)看克軍的測(cè)試，就很清晰了：

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

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

在 Chrome 下的瀑布圖是：

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

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

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

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

因?yàn)槎梢唬瑳Q定 img 的下載在 js 執(zhí)行后。又因?yàn)槎啥瑳Q定 js 的執(zhí)行在第一個(gè) css 后。于是最后在瀑布圖上體現(xiàn)出來(lái)，就是 img 的下載在第一個(gè) css 后。

再來(lái)看克軍的第二個(gè)結(jié)論：

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

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

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

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

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

注意3：本文沒(méi)有考慮 defer, async 屬性的影響，這是另一個(gè)故事。

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

轉(zhuǎn)自歲月如歌