DEMO:分析强制同步布局

这个案例模拟几个图片来回的使用AnimationFrame(),尽管这是基于帧的动画的推荐使用方式,然而这里仍然存在值得考虑到问题。下面我们就使用Timeline分析。


DEMO:分析强制同步布局_第1张图片
加载过程的样本

可以清楚的看到Animation Frame Fired事件后有warning,并且有提示是test.html:37,点击进去,看代码

DEMO:分析强制同步布局_第2张图片
这个显然是因为计算left属性时有了强制同步布局

那我们将divs[i].offsetTop替换为一个不依赖的值i,

DEMO:分析强制同步布局_第3张图片
显然没有了warning,而且用时缩小了很多

对于瀑布流,我们该运用什么样的方案去提高程序运行速度呢?

你可能感兴趣的:(DEMO:分析强制同步布局)