页面渲染过程
- 构建DOM树：解析HTML文件，构建DOM树，同时浏览器主进程负责下载CSS文件
- 构建CSS树：CSS文件下载完成，解析CSS文件形成CSSOM树
- 生成Render树：CSSOM+DOM =>渲染树RenderTree
- 布局（layout）:RenderObject根据盒模型确定元素的尺寸，位置
- 绘制（painting）:绘制页面像素信息
- 显示（display）:浏览器主进程将默认的图层和复合图层交给GPU进程，GPU进程在将各个图层合成，最后显示出页面
重绘与回流
在页面被用户访问时，DOM和CSS都有可能发生变化，一旦发生变化就需要重新绘制甚至重新布局
重绘
重新绘制 比如：字体颜色和背景色发生变化
重排
也叫做回流 比如：元素位置或大小改变，一旦发生重排肯定后续的重绘也会进行一次
重排的性能开销大于重绘
重绘的场景
一个元素的外观被改变（背景色，字体颜色，边框颜色等）
重排的场景
- 添加删除可见的DOM元素
- 元素位置发生改变
- 元素尺寸，位置发生改变
- 页面渲染初始化
- 浏览器尺寸改变
- 获取元素计算后的属性如：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)
优化思路
- 能重绘尽量不重排
- 能少排不多排
- 能小区域不大区域排
- 避免无效重排
- 急用GPU资源
