克軍做了一系列測試：js和css的順序關係，給出了現象和結論，但未給出原因。
js 和 css 在頁面中的位置，會影響其他資源（指 img 等非 js 和 css 資源）的載入順序，究其原因，有三個值得注意的點：
以上三點可簡述為三條基本定律：
定律二：js 執行依賴 css 最新渲染。
定律三：現代瀏覽器存在 prefetch 優化。
有了這三條定律，再來看克軍的測試，就很清晰了：
a,b – head裡出現外聯js，無論如何放，css檔案都不能和body裡的請求並行根據定律一和定律三，可以知道上面的結論不夠正確。比如：
rel="stylesheet"
href="mock.php?css1&sleep=2">
src="mock.php?js&sleep=3">
script>
rel="stylesheet"
href="mock.php?css2&sleep=4">
head>
rel="stylesheet"
href="mock.php?css3&sleep=5">
src="test.gif">
body>
調整一下 sleep 時間，還可以觀察到定律二的威力：
rel="stylesheet"
href="mock.php?css1&sleep=3">
src="mock.php?js&sleep=2">
script>
rel="stylesheet"
href="mock.php?css2&sleep=4">
head>
rel="stylesheet"
href="mock.php?css3&sleep=5">
src="test.gif">
body>
再來看克軍的第二個結論：
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的順序關係，給出了現象和結論，但未給出原因。js 和 css 在頁面中的位置，會影響其他資源 指 img 等非 js 和 css 資源 的載入順序，究其原因，有三個值得注意的點 以上三點可簡述為三條基本定律 定律二 js 執行依賴 css 最新渲染。定律三 現代瀏覽器...
JS 和 CSS 的位置對其他資源載入順序的影響
克軍做了一系列測試 js和css的順序關係，給出了現象和結論，但未給出原因。js 和 css 在頁面中的位置，會影響其他資源 指 img 等非 js 和 css 資源 的載入順序，究其原因，有三個值得注意的點 以上三點可簡述為三條基本定律 定律二 js 執行依賴 css 最新渲染。定律三 現代瀏覽器...
JS 和 CSS 的位置對其他資源載入順序的影響
克軍做了一系列測試 js和css的順序關係，給出了現象和結論，但未給出原因。js 和 css 在頁面中的位置，會影響其他資源 指 img 等非 js 和 css 資源 的載入順序，究其原因，有三個值得注意的點 以上三點可簡述為三條基本定律 定律二 js 執行依賴 css 最新渲染。定律三 現代瀏覽器...