DEMO:分析强制同步布局

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

<script>
window.onload=function(){
    var divs=document.getElementsByTagName("div"),
        test;
    function move(){
        for(var i=0;i<divs.length;i++){
             divs[i].style.backgroundColor="#"+Math.random().toFixed(6)*1000000;
             divs[i].style.left=(Math.sin(divs[i].offsetTop+new Date().getMilliseconds()*10)*10+50)+"px";
        }
    }
    test=window.requestAnimationFrame(move);
}   
</script>

加载过程的样本

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

这个显然是因为计算left属性时有了强制同步布局

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

显然没有了warning,而且用时缩小了很多

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