一、HTML解析
瀏覽器首先接收到HTML文件，然后對其進行解析，創建一個叫做DOM（Document Object Model）的數據結構。DOM是HTML元素的樹形表示，它能夠讓JavaScript和CSS訪問和操作頁面的內容。
二、CSS解析
同時，瀏覽器也會解析CSS文件，生成另一個數據結構，稱為CSSOM（CSS Object Model）。CSSOM也是一個樹形結構，它代表了頁面上所有CSS規則的層次關系。
三、渲染樹構建
接著，瀏覽器會將DOM和CSSOM結合起來，創建一個渲染樹。渲染樹包含了所有需要顯示在頁面上的DOM節點和這些節點的樣式信息。
四、布局
布局階段，也稱為“重排”，是計算渲染樹中所有節點在最終頁面上的位置和大小。布局的結果是一個“盒模型”，它精確地描繪了每個元素在視口中的位置。
五、繪制
最后，瀏覽器會通過繪制階段將渲染樹中的每一個節點轉化為屏幕上的實際像素。這個過程叫做“重繪”。
延伸閱讀
深入理解瀏覽器的渲染引擎
瀏覽器的渲染引擎是完成頁面渲染的核心，理解其工作原理對于理解頁面渲染至關重要。
渲染引擎的工作流程：渲染引擎首先解析HTML文檔，構建DOM樹，接著解析CSS樣式信息，構建CSSOM樹。最后，渲染引擎將DOM樹和CSSOM樹合并為渲染樹，再進行布局和繪制。渲染引擎的異步解析：大多數現代瀏覽器的渲染引擎都支持異步解析，即在構建DOM樹的同時進行CSSOM樹的構建，以提高渲染效率。渲染引擎的JavaScript處理：JavaScript代碼的執行可能會修改DOM樹和CSSOM樹，因此渲染引擎需要處理JavaScript與頁面渲染的交互關系。渲染引擎的優化策略：渲染引擎有許多優化策略來提高頁面渲染速度，例如使用圖形硬件加速、對DOM和CSSOM的增量式更新等。
京公網安備 11010802030320號