測試頁面：loadtime/test.html
[22:13:32.947] html start很明顯，js 的執行嚴格按照文件流中的順序進行。其中 deferred 的指令碼會在最後執行（注：firefox 3.5 開始支援 defer，而且支援得很完美）。[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] deferred 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
再來看下 ie8，結果如下：
[22:33:56.806] html start可以看出，ie8 下，defer 只對 external 指令碼有效，對 inline 指令碼無效。另，與 domcontentloaded 最接近的是 doscroll. 這是 doscroll 被廣泛用來模擬 domcontentloaded 的原因。小心：僅僅是模擬，細節上並不等價。[22: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
還可以得到乙個有點意外的結果：放在 body 結束前的指令碼，執行時，依舊最好放在 domready 事件中。無論在 firefox 還是 ie 下，解析到 html end 時，並不代表 dom 可以安全操作，特別是頁面比較複雜時。
從上面資料中，也可以看出 yslow 效能優化法則裡，建議將樣式置頂和指令碼置底的根據。
有興趣的可以進一步測試動態新增樣式和指令碼的情形，會稍有不同，但沒有特別 surprise.
最後總結下：
好了，廢話不多說。以上結果，建議各位親自測試，反覆測試，瘋狂測試，一直到眼花繚亂稀里糊塗恍然大悟繼續糊塗為止……
瀏覽器載入 渲染和解析過程黑箱簡析
很明顯，順序從上到下，文件流中先出現的資源先 在 ie8,safari,chrome 等瀏覽器下也類似。firefox 對 順序做了優化 firefox 會將 js,css 提前 而將等資源延遲到後面 對於渲染，利用 fiddler 將網速調慢，可以看到 css 後會馬上渲染到頁面，渲染和 同步進行...
瀏覽器載入 解析 渲染的過程
恢復內容開始 最近看一些前端的面試題，發現很多公司都會問到瀏覽器載入，解析，渲染相關的問題。這篇隨筆整理一下這些知識，便於理解瀏覽器是怎麼工作的。首先，前端在大多數開發過程中並沒有用到這些知識，那我們為什麼還要去理解瀏覽器的執行過程？事實上，對瀏覽器的理解能幫助前端開發者更好的實現最佳頁面。比如，瀏...
瀏覽器的載入 解析 渲染
1.瀏覽器在載入外部css檔案和檔案時是同步載入還是非同步載入？2.瀏覽器的載入和渲染時同時進行的還是先載入完成再渲染？下面的是我查到的一些資料和自己的一些理解 瀏覽器載入和解析html頁面過程 1.使用者輸入url，瀏覽器向伺服器發出請求，伺服器返回html檔案 2.瀏覽器開始載入html 發現標...