Question

我正在构建一个非常简单的UI原型，用户可以在其中水平滚动无限的缩略图流。令我惊讶的是16个移动的div在Firefox中如此缓慢但在Chrome，IE和Opera中如此平稳而快速？

这是使用setInterval：

每8毫秒运行一段代码

function update() {
    for (t in thumbs) {
        thumbs[t].element.style.left = Math.round((thumbs[t].offset * width * 1) + (width / 2) + (thumbs[t].x * thumbWidth * 1.6) - thumbWidth / 2) + 'px';
        thumbs[t].element.style.top = Math.round(height*0.48 + (thumbs[t].y * thumbHeight * 0.7) - thumbHeight / 2)+'px';
        thumbs[t].element.style.width = thumbWidth+'px';
        thumbs[t].element.style.height = thumbHeight+'px';
        thumbs[t].offset = thumbs[t].offset + (thumbs[t].targetOffset - thumbs[t].offset) / 30;
    }
}

这是一个完整的演示：http://jsfiddle.net/VbErB/

我意识到它并没有尽可能优化，但它也不是非常沉重。 Chrome的更新速度约为每秒120帧。我不确定Firefox，但肯定是很多更少，引起了令人不安的口吃。这必定是我不知道的一些常见的Firefox怪癖。

Firefox非常迟钝，带有简单的动画

0 个答案: