客户端渲染页面
- 浏览器渲染页面的步骤
- 解析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
