Skip to content

qyingkou/homework-browser-stage

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

homework-browser-stage

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

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

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

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

参考资料:

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 63.9%
  • HTML 26.4%
  • CSS 9.7%