瀏覽器渲染及動畫

瀏覽器渲染原理:

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

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

2.png

樣式更新

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

  • 經過javascript動態更新
  • 根據選擇器匹配對應的DOM,計算出style是佈局仍是樣式,以下圖所示:web

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

1.png

動畫

CSS中使用動畫,有兩種屬性能夠實現,一種是transitionanimation,它倆的區別從名字中也能夠看出來:瀏覽器

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

參考文章:
Render-tree Construction, Layout, and Paint
Stick to Compositor-Only Properties and Manage Layer Count數據結構

相關文章
相關標籤/搜索