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

克軍做了一系列測試：js和css的順序關係，給出了現象和結論，但未給出原因。

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

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

定律二：js 執行依賴 css 最新渲染。定律三：現代瀏覽器存在 prefetch 優化。

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

a,b – head裡出現外聯js，無論如何放，css檔案都不能和body裡的請求並行

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

在 chrome 下的瀑布圖是：

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

瀑布圖立刻發生了變化：

再來看克軍的第二個結論：

c – head裡的內聯js只要在所有外聯css前面，css檔案可以和body裡的請求並行（圖2）

d – head裡的內聯js只要在任一外聯css後面，css檔案就不能和body裡的請求並行（圖1）

克軍的其他結論都是對的，不多說。

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

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

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

瀏覽器在迅速發展，很多總結，特別是書籍上的，很難與時俱進。大家應該像克軍學習，多測試，多發現，這樣得來的知識，才不會過時。這篇部落格的總結，也肯定在未來甚至就在現在，已經存在錯誤。這些都無所謂，關鍵是要懂得測試的方法和分析的思路，有了「漁」，才能更好地探求和擁有「魚」。

克軍做了一系列測試 js和css的順序關係，給出了現象和結論，但未給出原因。js 和 css 在頁面中的位置，會影響其他資源指 img 等非 js 和 css 資源的載入順序，究其原因，有三個值得注意的點以上三點可簡述為三條基本定律定律二 js 執行依賴 css 最新渲染。定律三現代瀏覽器...