第一课 关键渲染路径
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