> 咕笛老師：前端面試中,本題目出現的頻率很高，各大廠都出現過。著重理解整個過程，并不需要死記硬背 瀏覽器渲染頁面的一般過程： 1.瀏覽器開始解析html，然后創建一個 DOM樹。并行請求 css/image/js在DOM樹中，每一個HTML標簽都有一個對應的節點，并且每一個文本也都會有一個對應的文本節點。DOM樹的根節點就是 documentElement，所對應的是html標簽。 2.瀏覽器開始解析CSS代碼，計算出最終的樣式數據。構建CSSOM樹。對CSS代碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優先級：瀏覽器默認設置 < 用戶設置 < 外鏈樣式 < 內聯樣式 < html中的style。 3.DOM Tree + CSSOM --> 渲染樹（rendering tree）。渲染樹會忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一個行在渲染樹中都是獨立的一個節點。渲染樹中的每一個節點都存儲有對應的css屬性。 4.一旦渲染樹創建好了，瀏覽器就可以根據渲染樹直接把頁面繪制到屏幕上 ## 重繪 在一定的條件下，會觸發頁面的重繪（repaint），所謂重繪，指的是屏幕的一部分要重新繪制。渲染樹節點發生改變，但不影響該節點在頁面當中的空間位置及大小。譬如某個div標簽節點的背景顏色、字體顏色等等發生改變，但是該div標簽節點的寬、高、內外邊距并不發生變化，此時觸發瀏覽器重繪 ## 重排 重排也叫回流（reflow），當渲染樹節點發生改變，影響了節點的幾何屬性（如寬、高、內邊距、外邊距、或是float、position、display：none;等等），導致節點位置發生變化，此時觸發瀏覽器重排（reflow），需要重新生成渲染樹。譬如JS為某個p標簽節點添加新的樣式："display:none;"。導致該p標簽被隱藏起來，該p標簽之后的所有節點位置都會發生改變。此時瀏覽器需要重新生成渲染樹，重新布局，即重排