浏览器渲染原理和关键渲染路径

浏览器的渲染流程

• JavaScript => Style => Layout => Paint => Composite

浏览器构建对象模型

构建DOM对象

• HTML => DOM

构建CSSOM对象

• CSS => CSSOM

浏览器构建渲染树

• DOM + CSSOM => Render Tree

布局（layout）与绘制（paint）

• 渲染树只包含网页需要的节点
• 布局计算每个节点精确的位置和大小 – “盒模型”
• 绘制是像素化每个节点的过程

影响回流的操作

• 添加/删除元素
• display : none
• 移动元素位置
• 操作styles
• offsetLeft、scrollTop、clientWidth
• 修改浏览器大小、字体大小

避免layout thrashing

• 避免回流
• 读写分离
  • 使用fastdom批量读写操作

复合线程（compositor thread）与图层（layers）

复合线程

• 将页面拆分图层进行绘制再进行复合
• 利用DevTools了解网页的图层拆分情况
• 哪些样式仅影响复合

只触发复合不触发布局和重绘的属性

• transform : translate(npx, npx)
• transform : scale(n)
• transform : rotate(ndeg)
• opacity : 0…1

减少重绘（repaint）

• 利用DevTools识别paint的瓶颈
• 利用will-change创建新的图层

高频事件防抖

let ticking = false

window.addEventListener('pointermove', (e) => {
  if(ticking) return 
  ticking = true
  requestAnimationFrame(() => {
    changeFn()
    ticking = false
  })
})