4

私は現在、コンテンツの再描画をトリガーせずに (したがって 60 fps の予算を逃さずに) Web ページ上の要素を (任意の位置に) 移動する方法を理解しようとしています。

transform: translate(...)合成は GPU で行われ、コンテンツの再描画は必要ないため、私のアプローチは を使用することでした。それでも、transform プロパティを変更すると、要素が再描画されます。

この場合の例を作成しました：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #moving {
            transform: translate(0, 0);
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.0.3.js"></script>
</head>
<body>
<div id="moving"></div>
<script>
    setTimeout(function () {
        $('#moving').css('transform', 'translate(100px, 100px)');
    }, 2000);
</script>
</body>
</html>
4

2 に答える 2

1

塗り直しは悪ではありません。ディスプレイ上の画像を更新するために必要な操作です。最新のブラウザは、必要最小限の領域を再描画するのが非常に賢いです。あなたの例では、Chrome はジョブを実行するために 0.18 ミリ秒しか必要としません。

開発者ツールのスクリーンショットは再描画を示しています

操作対象の要素が大きくなると、再描画に時間がかかりますが、それでも妥当な時間です (ほとんどの場合)。連続して何度もトリガーされると、コストが高くなる可能性があります (JavaScript/jQuery アニメーションなど) 。

于 2013-07-30T09:06:56.280 に答える