首頁 web前端 js教程 瀏覽器載入、渲染和解析過程黑箱簡析_javascript技巧

瀏覽器載入、渲染和解析過程黑箱簡析_javascript技巧

May 16, 2016 pm 05:47 PM
瀏覽器載入 渲染

用 Fiddler 監控,在 IE6 下,資源下載順序為:
ie6 timeline

很明顯,下載順序從上到下,文檔流中先出現的資源先下載。在 IE8, Safari, Chrome 等瀏覽器下也類似。

Firefox 對下載順序做了最佳化
firefox timeline
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] 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
登入後複製

很明顯,JS 的運作嚴格按照文檔流程的順序進行。其中 deferred 的腳本會在最後運行(註:Firefox 3.5 開始支援 defer,而且支援得很完美)。

再來看下 IE8,結果如下:

[22:33:56.806] HTML Start[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
登入後複製

可以看出,IE8 下,defer 只對 external 腳本有效,對 inline 腳本無效。另,與 DOMContentLoaded 最接近的是 doScroll. 這是 doScroll 被廣泛用來模擬 DOMContentLoaded 的原因。小心:只是模擬,細節上並不等價。

還可以得到一個有點意外的結果:放在 body 結束前的腳本,執行時,依舊最好放在 domready 事件中。無論在 Firefox 或 IE 下,解析到 HTML End 時,並不代表 DOM 可以安全操作,特別是當頁面比較複雜時。

從上面資料中,也可以看出 YSlow 效能最佳化法則裡,建議將樣式置頂和腳本置底的根據。

有興趣的可以進一步測試動態添加樣式和腳本的情形,會稍有不同,但沒有特別 surprise.

最後總結下

頁面資源的下載順序是從上到下的,文檔流中先出現的資源先下載(註:存在並發,具體請參考 UA Profiler)。當某一樣式下載完成時,會立刻渲染到頁面(反映了層疊樣式表中層疊在渲染時的意義)。當某一腳本下載完成時,也會立刻解析並執行。腳本的運作嚴格按照文件流程中的順序進行,deferred 的腳本會在正常腳本運作之後執行(Firefox 和 IE 下)。

特別要留意:當腳本執行時,會暫停該腳本之下所有資源的下載(因為腳本可能改變文件流,甚至跳轉頁面,瀏覽器的暫停策略是合理的)。若要小心內嵌腳本,經常會阻塞後續下載。

好了,廢話不多說。以上結果,建議各位親自測試,反覆測試,瘋狂測試,一直到眼花繚亂稀里糊塗恍然大悟繼續糊塗為止……

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

酷家樂怎麼渲染正交俯視圖_酷家樂渲染正交俯視圖教程 酷家樂怎麼渲染正交俯視圖_酷家樂渲染正交俯視圖教程 Apr 02, 2024 pm 01:10 PM

酷家樂怎麼渲染正交俯視圖_酷家樂渲染正交俯視圖教程

vue頁面渲染是同步還是非同步 vue頁面渲染是同步還是非同步 Dec 13, 2022 pm 07:26 PM

vue頁面渲染是同步還是非同步

Vue報錯:無法正確使用v-html渲染動態HTML程式碼,怎麼解決? Vue報錯:無法正確使用v-html渲染動態HTML程式碼,怎麼解決? Aug 19, 2023 pm 12:27 PM

Vue報錯:無法正確使用v-html渲染動態HTML程式碼,怎麼解決?

Vue3中的v-for函數:完美解決列表資料渲染 Vue3中的v-for函數:完美解決列表資料渲染 Jun 19, 2023 am 08:04 AM

Vue3中的v-for函數:完美解決列表資料渲染

Vue報錯:無法正確使用v-html渲染HTML程式碼,怎麼解決? Vue報錯:無法正確使用v-html渲染HTML程式碼,怎麼解決? Aug 26, 2023 am 11:25 AM

Vue報錯:無法正確使用v-html渲染HTML程式碼,怎麼解決?

如何利用Vue實現圖片的分級和渲染處理? 如何利用Vue實現圖片的分級和渲染處理? Aug 19, 2023 pm 07:53 PM

如何利用Vue實現圖片的分級和渲染處理?

重繪與回流:哪一個對渲染階段的影響更為關鍵? 重繪與回流:哪一個對渲染階段的影響更為關鍵? Jan 26, 2024 am 10:16 AM

重繪與回流:哪一個對渲染階段的影響更為關鍵?

掌握Canvas渲染模式的實作及工作原理 掌握Canvas渲染模式的實作及工作原理 Jan 17, 2024 am 08:40 AM

掌握Canvas渲染模式的實作及工作原理

See all articles