1

我正在制作一个非常简单的 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 的一些众所周知的怪癖，我只是不知道。

4

0 回答 0