瀏覽器是如何將HTML、CSS和JS渲染成網(wǎng)頁(yè)的詳解
前言
當(dāng)我們打開(kāi)瀏覽器，輸入一個(gè)網(wǎng)址，幾秒鐘后，一個(gè)完整的網(wǎng)頁(yè)就呈現(xiàn)在我們眼前。這個(gè)過(guò)程看似簡(jiǎn)單，但背后其實(shí)涉及了瀏覽器一系列復(fù)雜而精妙的操作。你是否好奇：瀏覽器是如何將從服務(wù)器下載的HTML、CSS和JavaScript文件，一步步“組裝”成我們看到的頁(yè)面的？本文將帶你深入瀏覽器的渲染流程，揭開(kāi)這一過(guò)程的神秘面紗。
一、從網(wǎng)絡(luò)請(qǐng)求到資源獲取
在我們輸入U(xiǎn)RL并按下回車(chē)后，瀏覽器首先會(huì)發(fā)起一個(gè)HTTP請(qǐng)求，向服務(wù)器獲取目標(biāo)頁(yè)面的HTML文件。這個(gè)HTML文件通常包含對(duì)其他資源的引用，例如：
- 外部CSS文件（通過(guò)
<link>標(biāo)簽） - JavaScript腳本（通過(guò)
<script>標(biāo)簽） - 圖片、字體、視頻等媒體資源
瀏覽器會(huì)根據(jù)HTML中的這些引用，并行地發(fā)起多個(gè)請(qǐng)求，下載所需的資源。這些文件可能來(lái)自同一個(gè)服務(wù)器，也可能來(lái)自CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)），以加快加載速度。
?? 小知識(shí)：現(xiàn)代瀏覽器通常對(duì)同一域名并發(fā)請(qǐng)求的數(shù)量有限制（如6個(gè)），因此合理使用域名分片（domain sharding）或HTTP/2的多路復(fù)用可以提升性能。
二、構(gòu)建DOM樹(shù)：解析HTML
當(dāng)瀏覽器接收到HTML文件后，會(huì)啟動(dòng)HTML解析器，逐行讀取HTML代碼，并將其轉(zhuǎn)換為一個(gè)結(jié)構(gòu)化的樹(shù)形對(duì)象——DOM（Document Object Model）。
DOM 是一個(gè)由節(jié)點(diǎn)組成的樹(shù)，每個(gè)HTML標(biāo)簽都對(duì)應(yīng)一個(gè)節(jié)點(diǎn)。例如：
<html>
<head>
<title>我的網(wǎng)頁(yè)</title>
</head>
<body>
<h1>歡迎光臨</h1>
<p>這是一個(gè)示例頁(yè)面。</p>
</body>
</html>會(huì)被解析為：
Document
└── html
├── head
│ └── title
│ └── "我的網(wǎng)頁(yè)"
└── body
├── h1
│ └── "歡迎光臨"
└── p
└── "這是一個(gè)示例頁(yè)面。"DOM 不僅是結(jié)構(gòu)的表示，還是JavaScript操作頁(yè)面的基礎(chǔ)。比如 document.getElementById() 就是基于DOM樹(shù)進(jìn)行查找。
三、構(gòu)建CSSOM：解析CSS
與此同時(shí)，瀏覽器會(huì)解析從服務(wù)器下載的CSS文件（包括內(nèi)聯(lián)樣式和 <style> 標(biāo)簽中的樣式），生成CSSOM（CSS Object Model）。
CSSOM 也是一個(gè)樹(shù)形結(jié)構(gòu)，但它不僅包含樣式規(guī)則，還體現(xiàn)了**層疊（Cascading）和繼承（Inheritance）**的特性。例如：
body {
font-size: 16px;
color: #333;
}
h1 {
color: blue;
}CSSOM 會(huì)記錄每個(gè)選擇器及其對(duì)應(yīng)的樣式聲明，并在后續(xù)與DOM結(jié)合時(shí)應(yīng)用這些樣式。
?? 注意：CSS是渲染阻塞資源。瀏覽器必須等待CSSOM構(gòu)建完成，才能進(jìn)行頁(yè)面渲染，否則可能出現(xiàn)“樣式閃爍”（FOUC）。
四、構(gòu)建渲染樹(shù)（Render Tree）
有了DOM和CSSOM之后，瀏覽器會(huì)將兩者結(jié)合，生成渲染樹(shù)（Render Tree）。
渲染樹(shù)只包含需要顯示的節(jié)點(diǎn)（例如，display: none 的元素不會(huì)被包含），并附上計(jì)算后的樣式信息。它是瀏覽器進(jìn)行布局和繪制的直接依據(jù)。
舉個(gè)例子：
<p>可見(jiàn)文本</p> <p style="display: none;">隱藏文本</p>
在渲染樹(shù)中，只有第一個(gè) <p> 會(huì)被包含。
五、布局（Layout）：計(jì)算元素位置和大小
渲染樹(shù)構(gòu)建完成后，瀏覽器進(jìn)入布局階段（也稱(chēng)“重排”或“reflow”）。在這個(gè)階段，瀏覽器會(huì)：
- 計(jì)算每個(gè)可見(jiàn)元素在頁(yè)面中的確切位置和尺寸
- 考慮盒模型、浮動(dòng)、定位、Flexbox或Grid等布局方式
- 確定元素的幾何信息（如寬度、高度、偏移量）
布局是一個(gè)遞歸過(guò)程，通常從根元素（<html>）開(kāi)始，向下遍歷整個(gè)渲染樹(shù)。
?? 提示：頻繁的DOM操作（如反復(fù)修改元素尺寸）會(huì)觸發(fā)多次重排，嚴(yán)重影響性能。建議使用
documentFragment或批量更新來(lái)優(yōu)化。
六、繪制（Paint）與合成（Compositing）
接下來(lái)是繪制階段（Paint），瀏覽器將渲染樹(shù)中的每個(gè)節(jié)點(diǎn)轉(zhuǎn)換為屏幕上的像素。這個(gè)過(guò)程包括：
- 繪制文字、顏色、邊框、陰影等視覺(jué)屬性
- 通常分層進(jìn)行（如背景層、邊框?qū)?、文本層?/li>
現(xiàn)代瀏覽器還會(huì)使用分層合成技術(shù)（Layer Compositing）。將頁(yè)面劃分為多個(gè)圖層（如固定定位的導(dǎo)航欄、視頻、動(dòng)畫(huà)元素），分別繪制，最后由**合成器線程（Compositor Thread）**合并成最終畫(huà)面，提升滾動(dòng)和動(dòng)畫(huà)的流暢度。
?? 優(yōu)化技巧：使用
transform和opacity來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，因?yàn)樗鼈兛梢栽诤铣蓪营?dú)立處理，無(wú)需重排或重繪。
七、執(zhí)行JavaScript：動(dòng)態(tài)改變頁(yè)面
JavaScript的執(zhí)行會(huì)穿插在整個(gè)過(guò)程中，但需要注意的是：
- 默認(rèn)情況下，<script> 標(biāo)簽會(huì)阻塞HTML解析（除非使用
async或defer屬性） - JS可以讀取和修改DOM與CSSOM，從而觸發(fā)重新構(gòu)建渲染樹(shù)、重排或重繪
例如：
document.querySelector('h1').style.color = 'red';這行代碼會(huì)修改CSSOM，進(jìn)而導(dǎo)致瀏覽器重新計(jì)算樣式和布局。
八、完整的渲染流程總結(jié)
我們來(lái)梳理一下整個(gè)流程：
- 網(wǎng)絡(luò)請(qǐng)求 → 獲取HTML、CSS、JS等資源
- 解析HTML → 構(gòu)建DOM樹(shù)
- 解析CSS → 構(gòu)建CSSOM樹(shù)
- 合并DOM與CSSOM → 生成渲染樹(shù)
- 布局（Layout） → 計(jì)算元素幾何信息
- 繪制（Paint） → 生成像素圖層
- 合成（Compositing） → 合并圖層，輸出到屏幕
- 執(zhí)行JS → 動(dòng)態(tài)交互與更新
這個(gè)過(guò)程可能循環(huán)發(fā)生，尤其是在用戶(hù)交互或動(dòng)態(tài)內(nèi)容加載時(shí)。
九、性能優(yōu)化建議
理解渲染流程，有助于我們寫(xiě)出更高效的前端代碼：
- 使用
async或defer加載非關(guān)鍵JS，避免阻塞解析 - 將CSS放在
<head>中，盡早構(gòu)建CSSOM - 減少重排（reflow）和重繪（repaint）的次數(shù)
- 利用
transform和opacity實(shí)現(xiàn)高性能動(dòng)畫(huà) - 合理使用
will-change或transform: translateZ(0)創(chuàng)建獨(dú)立圖層
十、優(yōu)化關(guān)鍵渲染路徑的策略
理解了瀏覽器的渲染流程后，我們可以采取一系列優(yōu)化措施來(lái)提升頁(yè)面性能：
- 減少阻塞資源：將關(guān)鍵的 CSS 和 JavaScript 放在頁(yè)面頭部，并使用
async或defer加載非關(guān)鍵腳本。 - 壓縮和合并文件：壓縮 HTML、CSS 和 JavaScript 文件，合并資源減少 HTTP 請(qǐng)求次數(shù)。
- 延遲加載：對(duì)非首屏內(nèi)容使用懶加載策略，確保頁(yè)面首次加載時(shí)只加載必要的內(nèi)容。
- 利用緩存：合理設(shè)置 HTTP 緩存策略（強(qiáng)制緩存、協(xié)商緩存），減少重復(fù)請(qǐng)求。
- 簡(jiǎn)化 DOM 結(jié)構(gòu)：減少 DOM 節(jié)點(diǎn)數(shù)量，避免深層嵌套，降低布局計(jì)算的復(fù)雜性。
結(jié)語(yǔ)
瀏覽器的渲染機(jī)制是前端開(kāi)發(fā)的基石。從HTML到可視頁(yè)面，每一步都凝聚了工程師的智慧。了解這一過(guò)程，不僅能幫助我們寫(xiě)出更高效的代碼，也能在遇到性能瓶頸時(shí)，快速定位問(wèn)題所在。
下一次當(dāng)你打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，不妨想一想：在那一瞬間，瀏覽器正默默地為你完成一場(chǎng)精密的“舞臺(tái)搭建”——而你，正是這場(chǎng)演出的觀眾與導(dǎo)演。
參考閱讀：
- MDN Web Docs: Introduction to the DOM
- Google Developers: Critical Rendering Path
- [《高性能網(wǎng)站建設(shè)指南》——Steve Souders**
到此這篇關(guān)于瀏覽器是如何將HTML、CSS和JS渲染成網(wǎng)頁(yè)的文章就介紹到這了,更多相關(guān)瀏覽器HTML、CSS和JS渲染成網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js判斷鼠標(biāo)移入移出方向的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
深入淺析JS Function()構(gòu)造函數(shù)
這篇文章給大家介紹了js function()構(gòu)造函數(shù)的知識(shí)以及關(guān)于function()構(gòu)造函數(shù)需要注意的幾個(gè)要點(diǎn)，本文介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-08-08
JS實(shí)現(xiàn)定時(shí)頁(yè)面彈出類(lèi)似QQ新聞的提示框
類(lèi)似QQ新聞的提示框要求頁(yè)面每隔半小時(shí)彈出一次提示消息，下面有個(gè)不錯(cuò)的實(shí)現(xiàn)方法，感興趣的朋友可以參考下2013-11-11
各瀏覽器對(duì)link標(biāo)簽onload/onreadystatechange事件支持的差異分析
各瀏覽器對(duì)link標(biāo)簽onload/onreadystatechange事件支持的差異分析，需要的朋友可以參考下。2011-04-04
淺談?dòng)肳ebpack路徑壓縮圖片上傳尺寸獲取的問(wèn)題
下面小編就為大家分享一篇淺談?dòng)肳ebpack路徑壓縮圖片上傳尺寸獲取的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
JavaScript進(jìn)階必學(xué)之作用域、GC?垃圾回收、閉包詳解
在編程語(yǔ)言中內(nèi)存管理是一個(gè)非常重要的方面,JavaScript 作為一種高級(jí)語(yǔ)言,開(kāi)發(fā)者不需要手動(dòng)管理內(nèi)存的分配和釋放,這篇文章主要介紹了JavaScript進(jìn)階必學(xué)之作用域、GC?垃圾回收、閉包的相關(guān)資料,需要的朋友可以參考下2026-05-05
郁悶!ionic中獲取ng-model綁定的值為undefined如何解決
很是郁悶！ionic中獲取ng-model綁定的值為undefined，如何解決？2016-08-08
這篇文章主要介紹了js驗(yàn)證上傳圖片的方法,可對(duì)上傳圖片的類(lèi)型、大小等進(jìn)行限制,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
javascript full screen 全屏顯示頁(yè)面元素的方法
要想讓頁(yè)面的某個(gè)元素全屏顯示，就像在網(wǎng)頁(yè)上看視頻的時(shí)候，可以全屏觀看一樣，該怎么實(shí)現(xiàn)呢2013-09-09
將json轉(zhuǎn)換成struts參數(shù)的方法
下面小編就為大家?guī)?lái)一篇將json轉(zhuǎn)換成struts參數(shù)的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11