Web ページのパフォーマンスの最適化: HTML のリフローと再描画を削減する効果的な方法

Web ページのパフォーマンスを向上させる: HTML のリフローと再描画を効果的に減らす方法

インターネットの急速な発展に伴い、Web ページのパフォーマンスに注目する人が増えています。最適化。高性能の Web サイトは、ユーザー エクスペリエンスを向上させるだけでなく、サーバーの負荷を軽減し、帯域幅を節約するなどの効果があります。 Web ページのパフォーマンスの最適化において、HTML のリフローと再描画を減らすことは非常に重要な側面です。この記事では、HTML のリフローと再描画を効果的に削減する方法を詳しく説明し、いくつかの具体的なコード例を示します。

1. HTML リフローと再ペイントの概念を理解する
   HTML リフロー (リフロー) と再ペイント (再ペイント) は、ブラウザーが Web ページのレイアウトを再計算し、Web ページを再描画するプロセスを指します。要素。ユーザーがページを操作すると (ウィンドウ サイズの変更、ページのスクロール、要素スタイルの変更など)、ブラウザーはリフロー操作と再描画操作をトリガーします。リフローや再描画が頻繁に発生すると、Web ページのパフォーマンスが低下する可能性があります。したがって、その発生を減らすために何らかの措置を講じる必要があります。

2. リフローを減らす
   (1) 要素スタイルの頻繁な変更を避ける: 要素のスタイルを変更すると、ブラウザーは Web ページのレイアウトを再計算し、リフローをトリガーします。したがって、要素のスタイルを頻繁に変更することは避ける必要があります。たとえば、変更が必要な要素を個別に複数回変更するのではなく、1 つの操作に結合できます。

   (2) style 属性の代わりに class を使用する: 要素のスタイルを 1 つのクラスに集中させ、クラスを変更することで要素のスタイルを変更します。これにより、スタイルの頻繁な変更を回避し、リフローの発生を減らすことができます。

   (3) レイアウト属性の直接操作は避けてください。一部の属性を変更すると、ページが再レイアウトされ、リフローが発生します。たとえば、要素の幅、高さ、マージン、その他の属性を変更すると、リフローがトリガーされます。したがって、これらのプロパティを直接操作することは避け、同じ効果を達成するためにリフローをトリガーしない変換や不透明度などのプロパティを使用するように努める必要があります。

   (4) バッチ挿入にドキュメント フラグメントを使用する: 多数のノードを DOM 要素に挿入する必要がある場合、1 つずつ挿入するのではなく、ドキュメント フラグメント (DocumentFragment) を使用してバッチ挿入できます。ドキュメント フラグメントは仮想ノード コンテナであるため、リフローをトリガーせずにメモリ内の DOM を操作できます。

   コード例:

     // 创建一个文档片段
     var fragment = document.createDocumentFragment();
     
     for (var i = 0; i < 1000; i++) {
    var div = document.createElement('div');
    div.innerHTML = '这是一个div元素';
    fragment.appendChild(div);
     }
     
     // 批量插入文档片段
     document.body.appendChild(fragment);

3. Reduce redraw
   (1) JavaScript アニメーションの代わりに CSS3 アニメーションを使用する: アニメーション効果を作成する場合、CSS3 アニメーションを使用する方が、 JavaScript アニメーションの方が効率的です。 CSS3 アニメーションはブラウザの内部で実装されるため、ハードウェア アクセラレーションを直接利用できますが、JavaScript アニメーションは要素のスタイルを変更することによって実装され、再描画操作をトリガーする必要があります。

   (2) アニメーション変換を実行するには、transform 属性を使用します。要素の移動、回転、スケーリングなどの変換操作を実行する必要がある場合、transform 属性を使用してこれを実現できます。変換属性は要素のレイアウトに影響を与えないため、リフローや再描画はトリガーされません。

   (3) 要素のスタイルを頻繁に読み取らないようにします。要素のスタイルを取得する必要がある場合、ブラウザは再描画操作をトリガーします。したがって、要素のスタイルを頻繁に読み取ることを避け、再描画の発生を減らすために、読み取る必要があるスタイルを変数に保存する必要があります。

   コード例:

     // 获取元素的样式
     var element = document.getElementById('my-element');
     var width = element.offsetWidth;
     
     // 避免频繁读取元素样式
     for (var i = 0; i < 1000; i++) {
    // 使用保存的变量来判断条件，而不是直接读取元素的样式
    if (width > 100) {
      // do something
    }
     }

上記の方法により、HTML のリフローと再描画の発生を効果的に減らし、Web ページのパフォーマンスを向上させることができます。同時に、Web ページの全体的な構造と、Web ページのパフォーマンスをさらに最適化するためのコードの最適化にも注意を払う必要があります。この記事が Web ページのパフォーマンスを効果的に向上させるのに役立つことを願っています。

以上がWeb ページのパフォーマンスの最適化: HTML のリフローと再描画を削減する効果的な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。