DOM
樹和CSSDOM
樹。HTML
會轉換成文檔對象模型DOM
,CSS
會轉換成CSS
對象模型CSSDOM
。它們兩個是互相獨立的數據結構。DOM
和CSSDOM
組合在一塊兒造成渲染樹。javascript
DOM
樹節點DOM
節點用合適的CSSDOM
規則去匹配瀏覽器將頁面渲染好以後,後面是如何動態更新樣式的:java
javascript
動態更新根據選擇器匹配對應的DOM
,計算出style
是佈局仍是樣式,以下圖所示:web
layout
將不會觸發layout
和paint
都不會觸發,只會觸發最後的composite
部分,好比動畫CSS
中使用動畫,有兩種屬性能夠實現,一種是transition
和animation
,它倆的區別從名字中也能夠看出來:瀏覽器
transition
是過渡的意思,它只有開始幀和結束幀,中間的過程瀏覽器用你指定的屬性自動完成,你沒法本身控制animation
是動畫的意思,它包含多個關鍵幀,經過控制幀,能夠作出複雜的動畫參考文章:
Render-tree Construction, Layout, and Paint
Stick to Compositor-Only Properties and Manage Layer Count數據結構