ユーザーがサムネイルの無限の流れを水平方向にスクロールできる非常に単純な UI のプロトタイプを作成しています。Firefox では 16 個の移動する div が非常に遅いのに、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 についてはよくわかりませんが、不快な量のスタッタリングが発生していることは間違いありません。