以下测试单元的共同目标是“将1000个列表项随机在x轴移动”。我们考察以下策略会对性能造成影响:
在【每次迭代都重新计算布局】中
:每次迭代都把原布局失效掉,同时重新计算布局。
在【仅重新计算一次布局】中
:每次迭代都把原布局失效掉,但只重新计算一次布局。
在【仅重绘】中
:每次迭代都把原绘画失效掉,同时重新绘制。
在【仅重新合成】中
:每次迭代都把原合成失效掉,同时重新合成。
考察不同的关键渲染路径下,会对性能和耗时产生多大的影响。
我们验证了哪些cssdom接口会使原计算结果失效(重新计算的前提条件),哪些cssdom接口会强制让渲染引擎立即开始计算(性能消耗)。
得出的结论是,尽量forced reflow在路径的末端,越往上越影响性能。
- 哪些属性会使哪些关键渲染计算失效
https://csstriggers.com/ - 哪些属性会让强制渲染引擎立即开始计算
https://kellegous.com/j/2013/01/26/layout-performance/