瀏覽器解析渲染HTML文檔的過程詳解（圖文）

瀏覽器的并發(fā)請(qǐng)求數(shù)目限制是針對(duì)同一域名的。因此可以使用 CDN 加速技術(shù)來提高用戶訪問網(wǎng)站的響應(yīng)速度，這樣使用了 CDN 的資源加載不會(huì)占用當(dāng)前域名下的并發(fā)連接數(shù)，從而減少阻塞的時(shí)間。

網(wǎng)頁性能

了解 HTML 文檔的解析和渲染的過程對(duì)于分析網(wǎng)頁性能有著重要意義，它可以幫助我們找到影響網(wǎng)頁性能的關(guān)鍵因素。例如，我們知道 JS 外部腳本的執(zhí)行會(huì)阻塞文檔的解析，那么重量級(jí)的第三方插件則會(huì)影響首頁加載的速度，如果因此影響到了用戶體驗(yàn)，我們就需要考慮這個(gè)第三方插件的使用成本是不是太高了，能否使用其他輕量級(jí)的插件進(jìn)行替代，或者只使用其中一部分模塊。

以 Datatables 為例：

上圖是一個(gè)項(xiàng)目頁面的 Network 截圖，紅色框中的部分出現(xiàn)了約 700ms 左右的空白，我們需要知道為什么頁面的加載會(huì)出現(xiàn)這樣的情況，這段空白時(shí)間瀏覽器在干什么？

我們分析 Timeline 圖，看看瀏覽器在這段時(shí)間的具體信息，如下：

通過 Timeline 圖我們可以看到，在 250ms~900ms 時(shí)間區(qū)間內(nèi)，瀏覽器在執(zhí)行 datatables.min.js 腳本代碼，這個(gè)腳本的執(zhí)行阻塞了文檔的解析，耗時(shí)約 700ms，對(duì)應(yīng)了 Network 圖中的空白。

我們繼續(xù)查看頁面總的耗時(shí)時(shí)間，評(píng)估 700ms 耗時(shí)的影響，如下：

可以看到，頁面總的完成耗時(shí)為 1.66s，由此可知 datatables.min.js 的執(zhí)行耗時(shí)占了很大比重，應(yīng)當(dāng)慎重考慮是否一定要使用這個(gè)插件，能否使用其他輕量級(jí)的插件進(jìn)行替代，或者能否精簡(jiǎn)插件的不必要模塊，或者舍棄插件的使用。

參考資料-1
瀏覽器接收到html代碼，可能是一份完整的文檔，也可能是一個(gè)chunk，即開始解析。解析過程是先構(gòu)建dom樹，再根據(jù)dom樹構(gòu)建渲染樹，最后瀏覽器將渲染樹繪制到頁面上。
構(gòu)建dom樹的過程即根據(jù)html代碼自上而下進(jìn)行構(gòu)建，當(dāng)遇到script文件加載／執(zhí)行會(huì)阻塞后面dom樹的構(gòu)建（javascript可能會(huì)改變dom樹），而遇到css文件則會(huì)阻塞渲染樹的構(gòu)建，即dom樹依然繼續(xù)構(gòu)建（除非遇到script標(biāo)簽并且css文件依舊未加載完成），但不會(huì)渲染繪制到頁面上。而無論哪個(gè)阻塞，該加載的文件還是會(huì)加載，例如html文檔中的其他css／js／圖片文件。
另外javascript被加載后就會(huì)被執(zhí)行，執(zhí)行的過程也阻塞樹的構(gòu)建。是執(zhí)行完了才解析其他內(nèi)容，而不是執(zhí)行完了才加載其他內(nèi)容。

作者：加冰
鏈接：https://www.zhihu.com/questio...

參考資料-2
首先，開源瀏覽器一般以8k每塊下載html頁面。
然后解析頁面生成DOM樹，遇到css標(biāo)簽或JS腳本標(biāo)簽就新起線程去下載他們，并繼續(xù)構(gòu)建DOM。
下載完后解析CSS為CSS規(guī)則樹，瀏覽器結(jié)合CSS規(guī)則樹和DOM樹生成Render Tree。
注意：構(gòu)建CSS Object Model（CSSOM)會(huì)阻塞JavaScript的執(zhí)行。JavaScript的執(zhí)行也會(huì)阻塞DOM的構(gòu)建。
JavaScript下載后可以通過DOM API修改DOM，通過CSSOM API修改樣式作用域Render Tree。
每次修改會(huì)造成Render Tree的重新布局和重繪。只要修改DOM或修改了元素的形狀或大小，就會(huì)觸發(fā)Reflow，單純修改元素的顏色只需Repaint一下（調(diào)用操作系統(tǒng)Native GUI的API繪制）。

作者：陳金
鏈接：https://www.zhihu.com/questio...

本篇文章到這里就已經(jīng)全部結(jié)束了，更多其他精彩內(nèi)容可以關(guān)注PHP中文網(wǎng)的JavaScript視頻教程欄目！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com