リフローと再描画の違いによってパフォーマンスがどの程度影響を受けるか-htmlチュートリアル-php.cn

リフローと再描画の違いによってパフォーマンスがどの程度影響を受けるか

王林

リリース： 2024-01-26 10:04:08

オリジナル

1011 人が閲覧しました

リフローと再描画の違いによってパフォーマンスがどの程度影響を受けるか

リフローと再描画の違いがパフォーマンスに与える影響には、特定のコード例が必要です

フロントエンド開発では、ページの変更が必要な状況によく遭遇します。 . 要素のスタイル、サイズ、位置の変更など。ただし、これらの変更にはコストがかからず、ブラウザのリフローおよび再描画操作がトリガーされ、ページのパフォーマンスに影響を及ぼします。

リフローと再ペイントは、ページを変更するときにブラウザによって実行される 2 つの異なる操作です。リフローとは、ページレイアウトや幾何学的プロパティが変更されたときに、ブラウザーが要素の位置とサイズを再計算し、ページレイアウトを更新して再描画する必要があることを意味します。再描画とは、ページのスタイルが変更されたときに、ブラウザーは再レイアウトせずに要素のスタイルを再描画するだけで済むことを意味します。

リフローにはページレイアウトの再計算が含まれるため、再描画よりもコストが大幅に高くなります。リフロー操作ではページの再レイアウトと再描画が行われますが、再描画ではページの再描画のみが行われます。したがって、ページのパフォーマンスを向上させるために、頻繁なリフローを避けるように努める必要があります。

リフローと再描画の違いがパフォーマンスに与える影響を示すために、いくつかのコード例を詳しく見てみましょう。

まず、ボタンと div 要素を含む単純なページを作成します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="moveBox()">移动盒子</button>

    <script>
        function moveBox() {
            var box = document.querySelector('.box');
            box.style.left = '200px';
        }
    </script>
</body>
</html>

ログイン後にコピー

このコードは、ボタンをクリックした後に div 要素を右に 200 ピクセル移動することを実装します。ただし、要素のスタイルを直接変更しているため、ブラウザでリフロー操作が実行されます。

次に、リフローを回避するためにコードを改善します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: left 0.3s ease-out;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button onclick="moveBox()">移动盒子</button>

    <script>
        function moveBox() {
            var box = document.querySelector('.box');
            box.classList.add('move');
        }
    </script>
</body>
</html>

ログイン後にコピー

この例では、CSS トランジション効果を使用してボックスのスムーズな動きを実現します。クラス名を追加 (移動) することで、リフロー操作をトリガーせずに要素のスタイルを変更するだけで済みます。これにより、ブラウザのコンピューティングコストが削減され、ページのパフォーマンスが向上します。

リフローと再描画の違いは、パフォーマンスに明らかな影響を与えます。リフロー操作を頻繁に行うと、ページレイアウトと描画が継続的に繰り返されるため、パフォーマンスが低下します。したがって、実際の開発では、CSS を合理的に使用し、要素のスタイルや幾何学的プロパティの直接操作を避けることにより、頻繁なリフローを回避し、ページのパフォーマンスを最適化するように努める必要があります。

要約すると、リフローと再描画は、ページ要素が変更されたときにブラウザによって実行される 2 つの異なる操作です。リフローにはページレイアウトの再計算が含まれるため、再描画よりもコストがかかります。 CSS を賢く使用し、要素のスタイルや幾何学的なプロパティの直接操作を避けることで、リフローの発生を最小限に抑え、ページのパフォーマンスを最適化するように努める必要があります。

以上がリフローと再描画の違いによってパフォーマンスがどの程度影響を受けるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。