フロントエンドのパフォーマンスの最適化: ページの再描画とリフローを減らす方法

フロントエンド パフォーマンス チューニング スキル: ページの再描画とリフローを減らす方法

Web 開発では、フロントエンド パフォーマンスの最適化が重要なトピックです。ユーザーが Web ページにアクセスしたとき、ページの応答速度はユーザー エクスペリエンスに直接影響します。重要な側面の 1 つはページの読み込み速度です。ページの読み込み速度に最も影響を与える要因は、再描画とリフローです。

ページの再描画は、新しいスタイルに従ってページの視覚的な部分を更新することを指しますが、リフローは、Web ページのレイアウトを再計算するプロセスを指します。再描画とリフローは相互に依存しており、ページの要素が再描画されると、多くの場合、周囲の要素がリフローされます。

再描画とリフローを頻繁に行うとページの読み込みが遅くなります。そのため、再描画とリフローの頻度を減らすためにいくつかのテクニックを講じる必要があります。

1. テーブル レイアウトの使用を避ける: テーブル レイアウトでは、レイアウトを計算するときにブラウザがテーブル内の各セルのスタイルを考慮する必要があるため、テーブル内の要素が変更されると、全体のリフローするテーブルです。

2. JavaScript アニメーションの代わりに CSS3 アニメーションを使用する: 最新のブラウザーでは、CSS3 はトランジションやトランスフォームなどのいくつかのアニメーション効果を提供しますが、これらはハードウェア レベルで実装されるため、JavaScript を使用して実装されるアニメーション効果よりも効率的です。 . レンダリングする。

3. hidden 属性の合理的な使用: 表示する必要のない一部の要素のスタイルを display:none または Visibility:hidden に設定すると、これらの要素の再描画やリフローを回避できます。

4. スタイルの頻繁な変更を避ける: 要素のスタイルを変更する必要がある場合、コード内のさまざまな場所に変更を分散させるのではなく、変更を集中的に行うことが最善です。ブラウザーは複数のスタイルの変更をマージするため、再描画とリフローの回数が減ります。

5. ドキュメント フラグメントを使用してノードの操作を減らす: 多数のノードをページに挿入する場合は、ドキュメント フラグメントを使用して操作し、それらを一度にページに挿入するのが最善です。これにより、複数回のリフローが回避されます。

具体的なコード例をいくつか示します:

1. テーブル レイアウトの使用を避ける:

   <table>
     <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
     </tr>
   </table>

   次のように変更します:

   <div class="row">
     <div class="cell">Cell 1</div>
     <div class="cell">Cell 2</div>
   </div>

2. JavaScript アニメーションの代わりに CSS3 アニメーションを使用します:

   // JavaScript动画
   function animate(element, target) {
     let position = 0;
     setInterval(() => {
    position += 1;
    element.style.left = position + 'px';
     }, 10);
   }
   
   // CSS3动画
   .element {
     transition: left 1s;
   }

3. 非表示属性の合理的な使用:

   .hidden-element {
     display: none;
     /* 或者 */
     visibility: hidden;
   }

4. スタイルの頻繁な変更を避けます:

   // 不推荐的做法
   element.style.marginTop = '10px';
   element.style.marginBottom = '20px';
   element.style.marginLeft = '30px';
   element.style.marginRight = '40px';
   
   // 推荐的做法
   element.style.margin = '10px 20px 30px 40px';

5. ドキュメント フラグメントを使用してノード操作を削減します:

   // 不使用文档片段
   for (let i = 0; i < 1000; i++) {
     let element = document.createElement('div');
     document.body.appendChild(element);
   }
   
   // 使用文档片段
   let fragment = document.createDocumentFragment();
   for (let i = 0; i < 1000; i++) {
     let element = document.createElement('div');
     fragment.appendChild(element);
   }
   document.body.appendChild(fragment);

概要:
テーブル レイアウトの使用を避け、代わりに CSS3 アニメーションを使用します。非表示属性を使用し、頻繁なスタイル変更を回避し、ドキュメント フラグメントを使用してノード操作を減らすことにより、ページの再描画とリフローを減らすことができ、それによってページの読み込み速度が向上し、ユーザー エクスペリエンスが向上します。実際の作業では、Web ページをより効率的かつエレガントにするために、特定の状況に応じてこれらのテクニックを合理的に使用する必要があります。

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