瀏覽器渲染及動畫

瀏覽器渲染原理：

1. 瀏覽器在渲染頁面以前會先構建DOM樹和CSSDOM樹。
2. HTML會轉換成文檔對象模型DOM，CSS會轉換成CSS對象模型CSSDOM。它們兩個是互相獨立的數據結構。

3. DOM和CSSDOM組合在一塊兒造成渲染樹。

   1. 遍歷DOM樹節點
   2. 對每一個DOM節點用合適的CSSDOM規則去匹配
   3. 計算出最終佈局，樣式
4. 最後將它們合併到一塊兒，渲染在頁面中

樣式更新

瀏覽器將頁面渲染好以後，後面是如何動態更新樣式的：

• 經過javascript動態更新

• 根據選擇器匹配對應的DOM，計算出style是佈局仍是樣式，以下圖所示：

  1. 若是是更改佈局，是會依次觸發
  2. 若是佈局沒有改動，只是更改了顏色之類的，layout將不會觸發
  3. 如何既不改佈局，也不改樣式啥的，layout和paint都不會觸發，只會觸發最後的composite部分，好比動畫

動畫

CSS中使用動畫，有兩種屬性能夠實現，一種是transition和animation，它倆的區別從名字中也能夠看出來：

• transition是過渡的意思，它只有開始幀和結束幀，中間的過程瀏覽器用你指定的屬性自動完成，你沒法本身控制
• animation是動畫的意思，它包含多個關鍵幀，經過控制幀，能夠作出複雜的動畫

參考文章：
Render-tree Construction, Layout, and Paint
Stick to Compositor-Only Properties and Manage Layer Count