Q：瀏覽器渲染網頁的過程

瀏覽器是如何渲染網頁的？

（1）瀏覽器將從服務器獲取的HTML文檔構建成 文檔對象模型（DOM）（Document Object Model）

（2）樣式將被載入和解析，構成  層疊樣式表模型CSSOM（CSS Object Model）

（3）在DOM和CSSOM之上，渲染樹（rendering tree）將會被建立，表明一系列將被渲染的對象（在Webkit內核中稱之爲renderer或者 渲染對象 render object，在Gecko內核中稱之爲 框架frame）。

        渲染樹映射除了不可見元素（例如：或者含有display:none的標籤）外的全部DOM結構。每一段文本字符串都將劃分在不一樣的渲染對象中，每個渲染對象都包含了它對應的DOM對象及計算後的樣式。換句話說，渲染樹是DOM的直觀表示。

（4）渲染樹的每一個元素包含的內容都是計算過的，它被稱之爲佈局（layout）。瀏覽器使用一種流式處理的方法，只須要一次pass繪製操做就能夠佈局全部的元素（tables須要屢次pass繪製，pass表示像素處理和頂點處理）

（5）最後佈局完成，渲染樹將轉化爲屏幕上的實際內容，這一步稱之爲繪製painting。

 

重繪Repaint
當頁面元素樣式的改變不影響元素在文檔流中的位置時（例如background-color, border-color,visibility）,瀏覽器只會將新樣式賦予元素並進行重繪操做。

迴流Reflow
當改變影響文檔內容或者結構，或者元素位置時，迴流操做就會被觸發，通常有如下幾種狀況：
（1）DOM操做（對元素的增刪改，順序變化等）；
（2）內容變化，包括表單區域內的文本改變；
（3）CSS屬性的更改或從新計算；
（4）增刪樣式表內容；
（5）修改class屬性；
（6）瀏覽器窗口變化（滾動或縮放）；
（7）僞類樣式激活（:hover等）。

https://blog.csdn.net/osdfhv/article/details/52159341