很明顯，**順序從上到下，文件流中先出現的資源先**。在 ie8, safari, chrome 等瀏覽器下也類似。
firefox 對**順序做了優化：
firefox 會將 js, css 提前**，而將等資源延遲到後面**。
對於渲染，利用 fiddler 將網速調慢，可以看到 css **後會馬上渲染到頁面，渲染和**同步進行。js 的解析和執行，也類似。
對於 js 執行，以及頁面載入相關事件的觸發，特別做了測試。在 firefox 下，開啟測試頁面：
[22:13:32.947] html start[22:13:32.947] normal inline script run time[22:13:34.904] normal external script run time[22:13:35.775] [body] normal external script run time[22:13:35.789] [body end] normal external script run time[22:13:35.789] html end[22:13:35.791] inline script run time[22:13:35.791] deferred external script run time[22:13:35.793] domcontentloaded[22:13:38.144] images[0] onload[22:13:38.328] images[1] onload[22:13:39.105] images[2] onload[22:13:39.105] images[3] onload[22:13:39.106] window.onload很明顯，js 的執行嚴格按照文件流中的順序進行。其中 deferred 的指令碼會在最後執行（注：firefox 3.5 開始支援 defer，而且支援得很完美）。
再來看下 ie8，結果如下：
[22:33:56.806] html start[ebxqbt22:33:56.826] normal inline script run time[22:33:57.786] normal external script run time[22:33:57.812] deferred inline script run time[22:33:57.816] document.readystate = interactive[22:33:57.934] [body] normal external script run time[22:33:58.310] [body end] normal external script run time[22:33:58.310] html end[22:33:58.346] deferred external script run time[22:33:58.346] images[0].readystate = loading[22:33:58.346] images[0].readystate = complete[22:33:58.346] images[0] onload[22:33:58.361] doscroll[22:33:58.451] images[1].readystate = loading[22:33:58.479] images[1].readystate = complete[22:33:58.479] images[1] onload[22:33:58.794] images[2].readystate = loading[22:33:58.854] images[2].readystate = complete[22:33:58.854] images[2] onload[22:33:58.876] images[3].readystate = loading[22:33:58.876] images[3].readystate = complete[22:33:58.876] images[3] onload[22:33:58.887] document.readystate = complete[22:33:58.888] 程式設計客棧window.onload可以看出，ie8 下，defer 只對 external 指令碼有效，對 inline 指令碼無效。另，與 domcontentloaded 最接近的是 doscroll. 這是 doscroll 被廣泛用來模擬 domcontentloaded 的原因。小心：僅僅是模擬，細節上並不等價。
ebxqbt還可以得到乙個有點意外的結果：放在 body 結束前的指令碼，執行時，依舊最好放在 domready 事件中。無論在 firefox 還是 ie 下，解析到 html end 時，並不代表 dom 可以安全操作，特別是頁面比較複雜時。
從上面資料中，也可以看出 yslow 效能優化法則裡，建議將樣式置頂和指令碼置底的根據。
有興趣的可以進一步測試動態新增樣式和指令碼的情形，會稍有不同，但沒有特別 surprise.
最後總結下：
頁面資源的**順序是從上到下的，文件流中先出現的資源先**（注：存在併發，具體請參考 ua profiler）。當某一樣式**完成時，會立刻渲染到頁面（體現了層疊樣式表中層疊在渲染時的含義）。當某一指令碼**完成時，也會立刻解析和執行。指令碼的執行嚴格按照文件流中的順序進行，deferred 的指令碼會在正常指令碼執行之後執行（firefox 和 ie 下）。
好了，廢話不多說。以上結果，建議各位親自測試，反覆測試，瘋狂程式設計客棧測試，一直到眼花繚亂稀里糊塗恍然大悟繼續糊塗為止……
本文標題: 瀏覽器載入、渲染和解析過程黑箱簡析
本文位址:
瀏覽器載入 渲染和解析過程的黑箱分析
測試頁面 loadtime test.html 22 13 32.947 html start 22 13 32.947 normal inline script run time 22 13 34.904 normal external script run time 22 13 35.775 b...
瀏覽器載入 解析 渲染的過程
恢復內容開始 最近看一些前端的面試題，發現很多公司都會問到瀏覽器載入，解析，渲染相關的問題。這篇隨筆整理一下這些知識，便於理解瀏覽器是怎麼工作的。首先，前端在大多數開發過程中並沒有用到這些知識，那我們為什麼還要去理解瀏覽器的執行過程？事實上，對瀏覽器的理解能幫助前端開發者更好的實現最佳頁面。比如，瀏...
瀏覽器的載入 解析 渲染
1.瀏覽器在載入外部css檔案和檔案時是同步載入還是非同步載入？2.瀏覽器的載入和渲染時同時進行的還是先載入完成再渲染？下面的是我查到的一些資料和自己的一些理解 瀏覽器載入和解析html頁面過程 1.使用者輸入url，瀏覽器向伺服器發出請求，伺服器返回html檔案 2.瀏覽器開始載入html 發現標...