1. 犀牛前端部落首页
  2. 前端性能优化

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

浏览器的渲染流程

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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4327.html

发表评论

登录后才能评论