客户端渲染页面

• 浏览器渲染页面的步骤
  • 解析HTML，生成DOM树，解析CSS，生成CSSOM树
  • 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
  • Layout(回流):根据生成的染树，计算它们在设备视口(viewport)内的确切位置和大小，这个阶段是回流
  • Painting(重绘): 根据潼染树以及回流得到的几何信息，得到节点的绝对像素
  • Display:将像素发送给GPU，展示在页面上

• DOM重绘和回流

  • 重绘:元素样式的改变（但宽高、大小、位置等不变）
  • 回流:元素的大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染

注意:回流一定会触发重绘，而重绘不一定会回流

• 前端性能优化之 : 避免DOM的回流

  • 放弃传统操作dom的时代，基于vue/react开始数据影响视图模式
  • 分离读写操作(现代的浏览器都有渲染队列的机制)
  • 样式集中改变
  • 缓存布局信息
  • 元素批量修改
  • 动画效果应用到position厘性为absolute或fixed的元素上(脱离文档流)
  • CSS3硬件加速(GPU加速)
  • 牺牲平滑度换取速度
  • 避免table布局和使用css的javascript表达式

  ---

  谢谢款待

小记整理于 2023 / 8 / 30