性能優化之渲染

關鍵英文詞: layout paint composite

渲染的管道流程

管道，恩， 跟linux上的概念很像，上一個處理完了交給下一個

• JS/CSS -> layout -> paint -> composite

  改變元素寬高佈局屬性的，都會引發layout，從而有後面的管道

• JS/css -> paint -> composite

  只改變元素的顏色、陰影什麼的

• JS/css -> composite

  目前只引發合成層渲染的CSS屬性: transform & opacity

  特殊使用，提高到其本身的層，建合成器層：

  will-change: transform;
  transform: translateZ(0);
  複製代碼

合成器層爲何牛

合成器線程能夠單獨處理用戶的交互並使內容更變,不需求主線程去執行,主線程執行js、佈局、樣式、繪製。

動畫性能優化(沒有使用transform或opacity的動畫)

1. FLIP: aerotwist.com/blog/flip-y…

能當即觸發佈局的js方法(forces a sync layout)

ele.getBoundingClientRect()

requestAnimationFrame

確保回調在下一幀開始時運行，確保當前樣式已渲染OK

requestAnimationFrame(function () {
    el.classList.add('animate-to-transform')
    el.style.transform = ''
})
複製代碼

Tools

1. Chrome Devtools裏面的「layer」選項卡，能夠幫助看到頁面上的層。

參考文檔

developers.google.com/web/fundame… developers.google.com/web/fundame… developers.google.com/web/fundame…