qyingkou / homework-browser-stage

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

homework-browser-stage

不同关键渲染路径的耗时实验

以下测试单元的共同目标是“将1000个列表项随机在x轴移动”。我们考察以下策略会对性能造成影响:

在【每次迭代都重新计算布局】中:每次迭代都把原布局失效掉,同时重新计算布局。
在【仅重新计算一次布局】中:每次迭代都把原布局失效掉,但只重新计算一次布局。
在【仅重绘】中:每次迭代都把原绘画失效掉,同时重新绘制。
在【仅重新合成】中:每次迭代都把原合成失效掉,同时重新合成。

考察不同的关键渲染路径下,会对性能和耗时产生多大的影响。
我们验证了哪些cssdom接口会使原计算结果失效(重新计算的前提条件),哪些cssdom接口会强制让渲染引擎立即开始计算(性能消耗)。
得出的结论是,尽量forced reflow在路径的末端,越往上越影响性能。

参考资料:

About


Languages

Language:JavaScript 64.0%Language:HTML 26.4%Language:CSS 9.7%