這篇文章主要介紹了瀏覽器中渲染流程的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創新互聯建站長期為千余家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為瓊海企業提供專業的成都網站設計、做網站，瓊海網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發。

瀏覽器主要組件結構

（瀏覽器主要組件）

渲染引擎——webkit和Gecko

Firefox使用Geoko——Mozilla自主研發的渲染引擎。

Safari和Chrome都使用webkit。Webkit是一款開源渲染引擎，它本來是為linux平臺研發的，后來由Apple移植到Mac及Windows上。

本文我主要以webkit渲染引擎來講解，盡管webkit和Gecko使用的術語稍有不同，他們的主要流程基本相同。

（webkit渲染引擎流程）

關鍵渲染路徑

關鍵渲染路徑是指瀏覽器從最初接收請求來的HTML、CSS、javascript等資源，然后解析、構建樹、渲染布局、繪制，最后呈現給客戶能看到的界面這整個過程。

所以瀏覽器的渲染過程主要包括以下幾步：

解析HTML生成DOM樹。

解析CSS生成CSSOM規則樹。

將DOM樹與CSSOM規則樹合并在一起生成渲染樹。

遍歷渲染樹開始布局，計算每個節點的位置大小信息。

將渲染樹每個節點繪制到屏幕。

構建DOM樹

當瀏覽器接收到服務器響應來的HTML文檔后，會遍歷文檔節點，生成DOM樹。

需要注意的是，DOM樹的生成過程中可能會被CSS和JS的加載執行阻塞。渲染阻塞問題下文會講。

構建CSSOM規則樹

瀏覽器解析CSS文件并生成CSS規則樹，每個CSS文件都被分析成一個StyleSheet對象，每個對象都包含CSS規則。CSS規則對象包含對應于CSS語法的選擇器和聲明對象以及其他對象。

渲染阻塞

當瀏覽器遇到一個 script 標記時，DOM 構建將暫停，直至腳本完成執行，然后繼續構建DOM。每次去執行JavaScript腳本都會嚴重地阻塞DOM樹的構建，如果JavaScript腳本還操作了CSSOM，而正好這個CSSOM還沒有下載和構建，瀏覽器甚至會延遲腳本執行和構建DOM，直至完成其CSSOM的下載和構建。

所以，script 標簽的位置很重要。實際使用時，可以遵循下面兩個原則：

CSS 優先：引入順序上，CSS 資源先于 JavaScript 資源。
JS置后：我們通常把JS代碼放到頁面底部，且JavaScript 應盡量少影響 DOM 的構建。

當解析html的時候，會把新來的元素插入dom樹里面，同時去查找css，然后把對應的樣式規則應用到元素上，查找樣式表是按照從右到左的順序去匹配的。

例如： div p {font-size: 16px}，會先尋找所有p標簽并判斷它的父標簽是否為div之后才會決定要不要采用這個樣式進行渲染）。
所以，我們平時寫CSS時，盡量用id和class，千萬不要過渡層疊。

構建渲染樹

通過DOM樹和CSS規則樹我們便可以構建渲染樹。瀏覽器會先從DOM樹的根節點開始遍歷每個可見節點。對每個可見節點，找到其適配的CSS樣式規則并應用。

渲染樹構建完成后，每個節點都是可見節點并且都含有其內容和對應規則的樣式。這也是渲染樹與DOM樹的大區別所在。渲染樹是用于顯示，那些不可見的元素當然就不會在這棵樹中出現了，譬如。除此之外，display等于none的也不會被顯示在這棵樹里頭，但是visibility等于hidden的元素是會顯示在這棵樹里頭的。

渲染樹布局

布局階段會從渲染樹的根節點開始遍歷，然后確定每個節點對象在頁面上的確切大小與位置，布局階段的輸出是一個盒子模型，它會精確地捕獲每個元素在屏幕內的確切位置與大小。

渲染樹繪制

在繪制階段，遍歷渲染樹，調用渲染器的paint()方法在屏幕上顯示其內容。渲染樹的繪制工作是由瀏覽器的UI后端組件完成的。

reflow與repaint：

根據渲染樹布局，計算CSS樣式，即每個節點在頁面中的大小和位置等幾何信息。HTML默認是流式布局的，CSS和js會打破這種布局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：replaint和reflow。

replaint：屏幕的一部分重畫，不影響整體布局，比如某個CSS的背景色變了，但元素的幾何尺寸和位置不變。
reflow： 意味著元件的幾何尺寸變了，我們需要重新驗證并計算渲染樹。是渲染樹的一部分或全部發生了變化。這就是Reflow，或是Layout。

所以我們應該盡量減少reflow和replaint，我想這也是為什么現在很少有用table布局的原因之一。

display:none 會觸發 reflow，visibility: hidden屬性并不算是不可見屬性，它的語義是隱藏元素，但元素仍然占據著布局空間，它會被渲染成一個空框，所以visibility:hidden 只會觸發 repaint，因為沒有發生位置變化。

有些情況下，比如修改了元素的樣式，瀏覽器并不會立刻 reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然后做一次 reflow，這又叫異步 reflow 或增量異步 reflow。
有些情況下，比如 resize 窗口，改變了頁面默認的字體等。對于這些操作，瀏覽器會馬上進行 reflow。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“瀏覽器中渲染流程的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：瀏覽器中渲染流程的示例分析-創新互聯
分享地址：http://www.2m8n56k.cn/article36/dccjsg.html

成都網站建設公司_創新互聯，為您提供定制網站、自適應網站、App開發、App設計、全網營銷推廣、小程序開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯