浏览器渲染原理和关键渲染路径
@ 姜波 | 星期二,九月 8 日,2020 年 | 1 分钟阅读 | 更新于 星期二,九月 8 日,2020 年

浏览器的渲染流程

  • 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
  })
})

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接