資訊專欄INFORMATION COLUMN
摘要：克軍做了一系列測試和的順序關系，給出了現象和結論，但未給出原因。比如在下的瀑布圖是黃色條是的，可以看出的延時下載是由定律一決定的。克軍的其他結論都是對的，不多說。
克軍做了一系列測試：js和css的順序關系，給出了現象和結論，但未給出原因。
JS 和 CSS 在頁面中的位置，會影響其他資源（指 img 等非 js 和 css 資源）的加載順序，究其原因，有三個值得注意的點：
JS 有可能會修改 DOM.典型的，可能會有 document.write. 這意味著，在當前 JS 加載和執行完成前，后續所有資源的下載有可能是沒必要的。這是 JS 阻塞后續資源下載的根本原因。
JS 的執行有可能依賴最新樣式。比如，可能會有 var width = $("#id").width(). 這意味著，JS 代碼在執行前，瀏覽器必須保證在此 JS 之前的所有 css（無論外鏈還是內嵌）都已下載和解析完成。這是 CSS 阻塞后續 JS 執行的根本原因。
現代瀏覽器很聰明，會進行 prefetch 優化。性能是如此重要，現代瀏覽器在競爭中，在 UI update 線程之外，還會開啟另一個線程，對后續 JS 和 CSS 提前下載（注意，僅提前下載，并不執行）。有了 prefetch 優化，這意味著，在不存在任何阻塞的情況下，理論上 JS 和 CSS 的下載時機都非常優先，和位置無關。
以上三點可簡述為三條基本定律：
定律一：資源是否下載依賴 JS 執行結果。
定律二：JS 執行依賴 CSS 最新渲染。
定律三：現代瀏覽器存在 prefetch 優化。
有了這三條定律，再來看克軍的測試，就很清晰了：
a,b – head里出現外聯js，無論如何放，css文件都不能和body里的請求并行
根據定律一和定律三，可以知道上面的結論不夠正確。比如：
在 Chrome 下的瀑布圖是：
黃色條是 js 的，可以看出 img 的延時下載是由定律一決定的。
定律三則決定了所有 js/css 都是并行開始下載的。在 Firefox 10 下，prefetch 非常強悍，對 img 也會預加載，瀑布圖如下：
調整一下 sleep 時間，還可以觀察到定律二的威力：
瀑布圖立刻發生了變化：
因為定律一，決定 img 的下載在 js 執行后。又因為定律二，決定 js 的執行在第一個 css 后。于是最后在瀑布圖上體現出來，就是 img 的下載在第一個 css 后。
再來看克軍的第二個結論：
c – head里的內聯js只要在所有外聯css前面，css文件可以和body里的請求并行（圖2）
d – head里的內聯js只要在任一外聯css后面，css文件就不能和body里的請求并行（圖1）
這個是定律二的威力。結論 c 是正確的，因為沒有 css 會影響 js 的執行。結論 d 則不夠正確。img 等其他資源，會在 js 前面的 css 下載完成后，以及 js 執行后，立刻開始下載。與頭部中，js 位置之后的 css 沒關系。
克軍的其他結論都是對的，不多說。
注意1：Firefox 10 的 prefetch 有點奇怪，有時會對 img 進行 prefetch，有時則不會。有興趣的可以進一步尋找規律。
注意2：上面的三個定律，是黑盒猜測，有興趣的可以去閱讀瀏覽器的源碼，應該能找到更深層次的原因。
注意3：本文沒有考慮 defer, async 屬性的影響，這是另一個故事。
瀏覽器在迅速發展，很多總結，特別是書籍上的，很難與時俱進。大家應該像克軍學習，多測試，多發現，這樣得來的知識，才不會過時。這篇博客的總結，也肯定在未來甚至就在現在，已經存在錯誤。這些都無所謂，關鍵是要懂得測試的方法和分析的思路，有了“漁”，才能更好地探求和擁有“魚”。
轉自 歲月如歌
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110975.html
摘要：克軍做了一系列測試和的順序關系，給出了現象和結論，但未給出原因。比如在下的瀑布圖是黃色條是的，可以看出的延時下載是由定律一決定的。克軍的其他結論都是對的，不多說。 克軍做了一系列測試：js和css的順序關系，給出了現象和結論，但未給出原因。 JS 和 CSS 在頁面中的位置，會影響其他資源（指 img 等非 js 和 css 資源）的加載順序，究其原因，有三個值得注意的點： J...
摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求，將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件放到引擎的處理隊列中等待處理。 瀏覽器的主要功能是將用戶選擇的 web 資源呈現出來，它需要從服務器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。 瀏覽器的線程 瀏覽器是多線程的，它們在內核制控下相互配合以保持同...
摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求，將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件放到引擎的處理隊列中等待處理。 瀏覽器的主要功能是將用戶選擇的 web 資源呈現出來，它需要從服務器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。 瀏覽器的線程 瀏覽器是多線程的，它們在內核制控下相互配合以保持同...
摘要：修改瀏覽器渲染因為的阻塞使得解析停止，下載完成之前，頁面無法顯示任何東西。瀏覽器渲染解析到文件時出現阻塞。我們把調整到尾部瀏覽器渲染這是頁面可以渲染了，但是沒有樣式。 本文示例源代碼請戳github博客，建議大家動手敲敲代碼。 前言 瀏覽器渲染頁面的過程 從耗時的角度，瀏覽器請求、加載、渲染一個頁面，時間花在下面五件事情上： DNS 查詢 TCP 連接 HTTP 請求即響應 服務器響...
摘要：修改瀏覽器渲染因為的阻塞使得解析停止，下載完成之前，頁面無法顯示任何東西。瀏覽器渲染解析到文件時出現阻塞。我們把調整到尾部瀏覽器渲染這是頁面可以渲染了，但是沒有樣式。 本文示例源代碼請戳github博客，建議大家動手敲敲代碼。 前言 瀏覽器渲染頁面的過程 從耗時的角度，瀏覽器請求、加載、渲染一個頁面，時間花在下面五件事情上： DNS 查詢 TCP 連接 HTTP 請求即響應 服務器響...
閱讀 2882·2021-11-22 09:34
閱讀 1211·2021-11-19 09:40
閱讀 3335·2021-10-14 09:43
閱讀 3566·2021-09-23 11:22
閱讀 1601·2021-08-31 09:39
閱讀 880·2019-08-30 15:55
閱讀 1414·2019-08-30 15:54
閱讀 854·2019-08-30 15:53
