我們可能都知道瀏覽器含有一個渲染引擎，用來渲染窗口所展示的內容。默認情況下，渲染引擎可以顯示html、xml文檔及圖片，它也可以借助插件(一種瀏覽器擴展)顯示其他類型數據，例如使用PDF閱讀器插件，用于顯示PDF格式。但是其具體的渲染原理和流程估計也有很多人都不知道或者不清楚吧。這些天研究了一下瀏覽器的渲染原理，有了些心得，在這里跟大家分享一下，這里只討論渲染引擎最主要的用途——顯示應用了CSS之后的html及圖片。

1.解析HTML，構建DOM樹(這里遇到外鏈，此時會發起請求)

2.解析CSS，生成CSS規則樹

3.合并DOM樹和CSS規則，生成render樹

4.布局render樹(Layout/reflow)，負責各元素尺寸、位置的計算

5.繪制render樹(paint)，繪制頁面像素信息

6.瀏覽器會將各層的信息發送給GPU，GPU將各層合成(composite)，顯示在屏幕上。這一點在網站開發中十分重要。

1.構建DOM樹

?無論是DOM還是CSSOM，都是要經過 bytes→characters→tokens→nodes→objectmodel這個過程。

DOM樹構建過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。

2.構建CSSOM樹

上述也提到了CSSOM的構建過程，也是樹的結構，在最終計算各個節點的樣式時，瀏覽器都會先從該節點的普遍屬性(比如body里設置的全局樣式)開始，再去應用該節點的具體屬性。還有要注意的是，每個瀏覽器都有自己默認的樣式表，因此很多時候這棵CSSOM樹只是對這張默認樣式表的部分替換。

3.生成render樹

DOM樹和CSSOM樹合并生成render樹

簡單描述這個過程：

DOM樹從根節點開始遍歷可見節點，這里之所以強調了“可見”，是因為如果遇到設置了類似 display:none;的不可見節點，在render過程中是會被跳過的(但 visibility:hidden;opacity:0這種仍舊占據空間的節點不會被跳過render)，保存各個節點的樣式信息及其余節點的從屬關系。

4.Layout 布局

有了各個節點的樣式信息和屬性，但不知道各個節點的確切位置和大小，所以要通過布局將樣式信息和屬性轉換為實際可視窗口的相對大小和位置。

5.Paint 繪制

對于網站建設而言，Paint 繪制可以說是會給人一種萬事俱備的感覺，最后只要將確定好位置大小的各節點，通過GPU渲染到屏幕的實際像素。

希望以上內容對您有所幫，如果大家對這些內容還有想要了解的可以隨時咨詢我們，也可以關注創新互聯的官方公眾號，里邊會有更多的相關內容解決您的問題。

當前標題：網站開發關于瀏覽器渲染過程講解
本文網址：http://m.2m8n56k.cn/news1/315151.html

成都網站建設公司_創新互聯，為您提供手機網站建設、移動網站建設、企業網站制作、建站公司、網站設計公司、關鍵詞優化

廣告

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