Web ページのパフォーマンスはリフローと再描画の影響を受けます

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

インターネットの急速な発展に伴い、Web ページのパフォーマンスは解決できない問題になっています。無視されました。 Web ページの読み込み速度とインタラクティブなスムーズさに対するユーザーの要求はますます高まっています。 Web ページのレンダリングにおける重要なリンクとして、リフローと再描画は Web ページのパフォーマンスに重要な影響を与えます。リフローと再描画の原理を理解し、的を絞った方法でコードを最適化すると、Web ページのパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。

まず、リフローと再描画の定義と実行プロセスを理解しましょう。

リフロー (レイアウト) とは、ブラウザーが DOM 要素のスタイルと構造に基づいて、Web ページ内の各要素の位置とサイズを計算して決定することを意味します。リフローが発生すると、ブラウザは要素の位置、サイズ、テキストの折り返しなど、Web ページのレイアウトを再計算します。リフローは複雑な計算およびレイアウト アルゴリズムをトリガーし、大量のパフォーマンス リソースを消費します。

再描画 (ペイント) とは、ブラウザーが要素のスタイルとレイアウトに従って要素のコンテンツをビットマップに描画し、それを画面に表示することを意味します。再描画が発生すると、ブラウザは色、影、透明度などの要素の描画プロパティを再計算し、要素を再描画します。

リフローと再描画は通常、継続的に実行され、1 回のリフローで複数の再描画が発生することがよくあります。

以下では、特定のコード例を使用して、Web ページのパフォーマンスに対するリフローと再描画の影響を示し、いくつかの最適化に関する提案を提供します。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box" id="myBox"></div>

<script>
    var myBox = document.getElementById("myBox");
    myBox.style.width = "300px"; // 引起回流和重绘
    myBox.style.height = "300px"; // 引起回流和重绘
    myBox.style.opacity = "0.5"; // 只引起重绘

    // 优化建议：尽量避免频繁修改样式，可以使用 CSS 类名切换的方式，一次性修改多个属性。
    myBox.classList.add("big-box");

    // 优化建议：使用文档片段（DocumentFragment）进行 DOM 操作，减少回流次数。
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        var div = document.createElement("div");
        fragment.appendChild(div);
    }
    myBox.appendChild(fragment);
</script>

上記のコードでは、まず要素 myBox を作成し、その初期スタイルを設定します。次に、myBox の幅、高さ、透明度が JavaScript によって変更されました。ここで、幅と高さを変更するとリフローと再描画がトリガーされるのに対し、透明度を変更すると再描画のみがトリガーされることに注意してください。

コードを最適化するために、2 つの提案を提供します。まず、スタイルを頻繁に変更しないようにしてください。CSS クラス名の切り替えを使用すると、複数のプロパティを一度に変更できます。たとえば、classList.add メソッドを使用して big-box クラスを要素に追加し、要素の幅と高さを一度に変更できます。

2 番目に、DOM 操作にドキュメント フラグメント (DocumentFragment) を使用すると、リフローの回数を減らすことができます。サンプル コードでは、ドキュメント フラグメントを使用して 1000 個の div 要素を一度に作成し、myBox に追加します。そうすることで、リフローの回数が減り、パフォーマンスが向上します。

リフローと再描画はパフォーマンス リソースを大量に消費するため、Web 開発ではあまりにも多くのリフローと再描画操作をトリガーしないようにする必要があります。パフォーマンスが重要なシナリオの場合は、Chrome 開発者ツール、Lighthouse などのツールを使用してページのパフォーマンスを検出し、最適化できます。

リフローと再描画の原理を理解し、それに応じてコードを最適化することで、Web ページのパフォーマンスとユーザー エクスペリエンスを向上させ、Web ページの読み込みを高速化し、よりスムーズに操作できるようになります。この記事の内容があなたのお役に立てれば幸いです。

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