第一课 关键渲染路径
Web网页应该尽量避免不稳定性。
多数设备刷新屏幕的频率为每秒60帧，即60fps
渲染流程
- 生成DOM树，（Parse HTML）
- 生成CSS树
- 合并成为渲染树（Recalculate Styles），计算样式
- 计算布局，生成盒模型（Layour/Reflow）
- 将页面由矢量转为光栅（Paint）
- 处理复合层（compositive layer）
注意，复合层上方的元素也会变为单独的图层（隐式复合）
对于样式改变，导致的渲染流程：
对于JavaScript部分，指的是能够引起外观的变化，不仅可以通过JavaScript来改变页面外观，也可以使用CSS动画或者Web Animation API来实现。
改变外观后可能会需要重新计算Style属性（比如媒体查询等），有可能不需要。
改变的CSS属性不同，后续触发流程也不同。
- 改变宽度、高度、位置等几何结构，会触发后续的Layout、Paint、Composite步骤
- 改变背景图片、颜色、阴影等不涉及几何几何尺寸的属性，不会再触发Reflow，只会触发后续Paint、Composite步骤
- 改变
transform、opacity等会生成单独的图层的属性，不会再触发Reflow和Repaint，只需触发Composite步骤
CSS属性的改变应该尽可能触发少量的工作，避免Reflow和Repaint，提高性能。
练习
（1）第一题
渲染树中只包含了最终显示在屏幕上的元素内容，它与DOM树并不完全相同，比如它不会包含display:none的元素，不会包含<head>标签中的元素。
所以这道题目的答案是A，而其他的属性，虽然不会占据屏幕空间，但是还是属于页面的一部分，仍然会包含在渲染树中。
（2）第二题
无论是改变body还是改变其中内部的div的宽度，浏览器都会做出最坏的打算，就是需要对全部DOM元素的样式进行计算，对整个文档进行Reflow和Repaint。所以答案是C
（3）第三题
题目中是一个弹性部局的容器（flex），但改变容器的大小，内部元素的尺寸会随机发生变化。当新的页面渲染时，浏览器会经历那些步骤？
弹性容器的尺寸发生变化，内部元素的尺寸会发生变化，但是它们的Style并没有发生变化（因为宽度都是弹性确定的，而非固定值，并且不涉及媒体查询短点改变样式的条件），所以不会重新计算Style，但是由于宽度发生了变化，所以后续的Layout、Paint、Composite都会执行。
（4）第四题
会触发Layout+Pai
最低0.47元/天 解锁文章
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
