瀏覽器渲染網(wǎng)頁的流程是什么

本篇內(nèi)容主要講解“瀏覽器渲染網(wǎng)頁的流程是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“瀏覽器渲染網(wǎng)頁的流程是什么”吧!

　　瀏覽器渲染網(wǎng)頁的流程，瀏覽器從HTTP服務(wù)器獲取html文檔，到呈現(xiàn)頁面給用戶，會經(jīng)過以下幾個步驟：

　　瀏覽器渲染網(wǎng)頁流程

　　1、解析文檔構(gòu)建DOM樹

　　瀏覽器的解析內(nèi)容可以分為三個部分：

　　HTML/XHTML/SVG：解析這三種文件后，會生成DOM樹（DOMTree）

　　CSS：解析樣式表，生成CSS規(guī)則樹（CSSRuleTree）

　　JavaScript：解析腳本，通過DOMAPI和CSSOMAPI操作DOMTree和CSSRuleTree，與用戶進(jìn)行交互。

　　以上三類文件的執(zhí)行順序會根據(jù)其在文檔中的位置及其標(biāo)簽屬性的不同而有異同，具體在后文進(jìn)行討論。

　　2、構(gòu)建渲染樹

　　解析文檔完成后，瀏覽器引擎會將CSSRuleTree附著到DOMTree上，并根據(jù)DOMTree和CSSRuleTree構(gòu)造RenderingTree（渲染樹）。此處需要注意：

　　RenderTree和DOMTree的區(qū)別在于，類似Head或display：node之類的東西不會放在渲染樹中；

　　將CSSRuleTree匹配到DOMTree需要解析CSS的選擇器，為了提高該過程的性能，DOM樹應(yīng)該盡量小，CSSSelector應(yīng)該盡量使用id和class，避免過度層疊。

　　3、布局與繪制渲染樹

　　解析position,overflow,z-index等等屬性，計算每一個渲染樹節(jié)點的位置和大小，此過程被稱為reflow。最后調(diào)用操作系統(tǒng)的NativeGUIAPI完成繪制（repain）。注意：

　　渲染樹的節(jié)點，在Gecko中稱為frame，而在webkit中稱為renderer；

　　reflow和repaint是兩個不同的概念，其區(qū)別會在后文進(jìn)行探討。

　　腳本和樣式文件對瀏覽器渲染網(wǎng)頁的影響

　　瀏覽器從服務(wù)器獲取文檔并從上到下進(jìn)行解析，在腳本文件標(biāo)簽不包含defer和async屬性的情況下，會按照如下規(guī)則執(zhí)行文檔內(nèi)容：

　　解析html文檔，遇到HTML標(biāo)簽時，構(gòu)建DOM樹

　　在構(gòu)建DOM的過程中，如果遇到外聯(lián)的樣式聲明或腳本聲明，則暫停文檔解析，創(chuàng)建新的網(wǎng)絡(luò)連接，開始下載樣式文件和腳本文件

　　樣式文件下載完成后，構(gòu)建CSSRuleDOM，腳本文件下載完成后，解釋并立即執(zhí)行。

　　構(gòu)建DOM的同時，結(jié)合CSS規(guī)則樹完成頁面渲染。

　　如果DOM樹先于CSS規(guī)則樹構(gòu)建完成，則在CSS規(guī)則樹構(gòu)建完成后，頁面會發(fā)生一次重繪，將新構(gòu)建的CSS規(guī)則應(yīng)用于渲染樹。

　　腳本文件對文檔解析的影響

　　在這個過程中，腳本文件的下載和執(zhí)行是與文檔解析同步進(jìn)行的，腳本文件的下載和執(zhí)行都會阻塞文檔的解析，如果控制得不好，在用戶體驗上就會造成一定程度的影響。

到此，相信大家對“瀏覽器渲染網(wǎng)頁的流程是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！