# 浏览器渲染流程
分析：
1. 网页的渲染流程
1. 浏览器的dom是分层的，网页是3D的。
2. 对DOM元素节点计算样式结果 Recalculate Style样式重计算
3. 为每个节点生成图形位置Layout回流重排
4. 将每个节点绘制填充到图层中Paint
5. 图层作为纹理上传到GPU
6. Composite Layers 合成层把符合图层生成到页面
2. Composite Layers 做了什么？
1. 图层的绘制列表，准备好，主线程 commit 合成线程
2. 合成线程 viewport rt 划分图块
3. 生成位图 栅格化（光栅化） raster
4. 所有图块 GPU合成生成DarwQuad提交给浏览器渲染进程
5. viz组件 接收到DarwQuad 绘制到我们的屏幕上
# 页面分层
知道吗?🤔
那些属性会分层?如何查看图层?
在 performance 里面点击 Layers 可以看到图层的列表
根元素
position
transform
半透明
css滤镜
canvas
video
overflow
页面光分层不行,让 GPU 参与工作才是提升性能的王道,那些属性能让 GPU 参与工作呢?
# GPU 硬件加速
CSS3D
video
webgl
transform
will-change:transform
# 影响重绘和重排的操作
重绘 是我们改动元素的字体颜色,背景色等外观元素时候,并不会改变它的大小,也不会影响其他元素的布局,这个时候就不需要重新构建渲染树。浏览器会对元素的样式重新绘制,这个过程叫做 "重绘"
重绘的触发: 任何对元素样式,如 color,background-color 等属性的改变,JS和CSS都会引起重绘。
重排 一般来说盒子动了必定必定会 重排,因此建议使用怪异盒模型,固定盒子的大小.
重排必定引起重绘
- 添加/删除元素
- 内容发生改变(文字数量或图片大小等等)
- display:none
- 移动元素位置
- 修改浏览器大小,字体大小
还有一些读取操作也可能引起重排
- offset(Top|Left|Width|Height)
- scroll(Top|Left|Width|Height)
- client(Top|Left|Width|Height)
- getComputedStyle()
这里有个疑问🤔️
为什么读取也会造成重排?
因为在用JS操作DOM时,浏览器会把操作维护在一个队列中,当达到一定的数量浏览器再统一去执行队列中的操作.当去查询这些属性时,浏览器就会强制刷新队列。因为如果不立即执行队列中的任务,有可能得到的结果是错误的。相当于你强制打断了浏览器的优化流程，引起了重排.
不知道哪些属性影响咋办🤔️
csstriggers 可查看是否引起重排重绘
# 减少重绘
利用 DevTools 识别 paint 的瓶颈,Chrome 工具的使用
蓝色:网络通信和 HTML 解析
黄色:JavaScript 执行时间
紫色:样式计算和布局,即 Layout 重排
绿色:Paint 重绘
CSS 是否会引起重排和重绘?
在 例子 中我们打开 performance 进行录制
发现一直在执行 Layout(重排)-Paint(重绘)-Composite Layers(合成)的过程
使用 transform 开启硬件加速后,再次录制如下:
可以清楚的看到主线程现在处于空闲状态,而 GPU 参与了工作,直接跳过了重绘和重排的过程,大大的提升了性能!
小结
使用 top left 会发现不断的重排和重绘
使用 transform 则没有
# 使用 fastdom
在 fastdom事例 中我们可以明确的感觉到用了 fastdom 页面流畅许多
现在我们自己来写个简单 demo 操作下:
我们点开 performance,查看页面绘制过程发现不停的 Recalculate 和进行 layout
但是我们使用 fastdom 进行读写分离后,发现进行了统一的操作,大大减少了浏览器的开销
# requestAnimationFrame
如果想执行动画操作,可以使用 requestAnimationFrame 要求浏览器在下次重绘之前调用指定的回调函数更新动画,可以达到和浏览器同步刷新,以避免不必要的开销.
# 总结
