ページのパフォーマンスの鍵: ページの再描画やリフローを回避するためにフロントエンドを最適化する

フロントエンド最適化の要点: ページの再描画とリフローを効果的に回避する方法、具体的なコード例が必要です

インターネットの急速な発展に伴い、フロントエンドWeb ページのパフォーマンス最適化の観点からの開発はますます重要になっています。中でも、ページの再描画とリフローを回避することは、Web ページのパフォーマンスを向上させるための重要な要素です。この記事では、フロントエンド開発者がページの再描画とリフローを効果的に削減し、ユーザー エクスペリエンスを向上させるのに役立ついくつかの効果的な方法と具体的なコード例を紹介します。

1. ページの再描画とリフローの原因と影響

1. ページの再描画: 要素のスタイルが変更されると、ブラウザーは要素の一部または全体を再描画する必要があることを意味します。コンテンツ。たとえば、要素の色や背景などのスタイル属性が変更されると、要素は再描画されます。
2. ページ リフロー: ページ レイアウトと幾何学的属性が変更された場合、ブラウザーは要素のレイアウトと幾何学的属性を再計算し、ページのレンダリング結果を更新する必要があることを意味します。たとえば、要素のサイズ、位置、その他の属性が変更されると、要素とその祖先要素のリフローがトリガーされます。

再描画とリフローにより、ブラウザがページを再計算してレンダリングすることになり、追加のコンピューティング リソースと時間を消費するため、ページのパフォーマンスと応答速度に影響します。特にモバイル デバイスでは、このパフォーマンスの低下はさらに顕著になります。

2. ページの再描画とリフローを回避する方法

1. 仮想 DOM の使用: 仮想 DOM を使用すると、頻繁なページの再描画とリフローを回避できます。ページ上の要素と状態をメモリに保存し、変更された部分のみを更新し、最後に変更された部分をページにレンダリングすることで機能します。 React や Vue などのフロントエンド フレームワークが提供する仮想 DOM メカニズムを使用して実装できます。

2. バッチでの DOM 操作: DOM に対する直接操作の数を減らし、DOM 操作をバッチで実行してみます。要素のスタイルを複数回変更する必要がある場合は、クラスを追加または削除することで複数の要素のスタイルを一度に変更できます。

   // 错误示例：多次修改元素样式
   element.style.width = '100px';
   element.style.height = '200px';
   element.style.backgroundColor = 'red';
   
   // 正确示例：一次性修改元素样式
   element.classList.add('modified');

3. レイアウトの強制同期を避ける: offsetWidth、offsetHeight などの要素のレイアウト情報を取得する必要がある操作では、呼び出しの数を最小限に抑える必要があります。要素のレイアウト情報を複数回取得する必要がある場合は、それを変数に保存してから再利用できます。

   // 错误示例：多次获取元素布局信息
   for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].offsetWidth);
    console.log(elements[i].offsetHeight);
   }
   
   // 正确示例：一次获取元素布局信息
   for (let i = 0; i < elements.length; i++) {
    const width = elements[i].offsetWidth;
    const height = elements[i].offsetHeight;
    console.log(width);
    console.log(height);
   }

4. アニメーションの最適化を使用する: アニメーション効果を使用する必要がある場合は、要素のスタイル属性を直接変更することを避け、CSS アニメーションを使用するか、最適化のために requestAnimationFrame メソッドを使用してみてください。 CSS アニメーションでは、transform 属性を使用して、ページのリフローをトリガーせずに、ディスプレイスメントやスケーリングなどのアニメーション効果を実現できます。

   /* CSS动画示例 */
   .box {
    transition: transform 1s;
   }
   
   .box:hover {
    transform: translateX(100px);
   }

   /* requestAnimationFrame示例 */
   function animate() {
    element.style.transform = `translateX(${x}px)`;
   
    if (x < targetX) {
    requestAnimationFrame(animate);
    }
   }
   
   animate();

5. ドキュメント フラグメントの使用: 複数の DOM ノードを動的に生成する必要がある場合、ドキュメント フラグメント (DocumentFragment) を使用してパフォーマンスを向上させることができます。ドキュメント フラグメントは仮想 DOM コンテナであり、これを使用して複数の DOM ノードをドキュメントに直接追加し、複数のリフロー操作を削減できます。

   // 错误示例：逐个添加DOM节点
   for (let i = 0; i < data.length; i++) {
    const item = document.createElement('li');
    item.textContent = data[i];
    list.appendChild(item);
   }
   
   // 正确示例：使用文档片段添加DOM节点
   const fragment = document.createDocumentFragment();
   
   for (let i = 0; i < data.length; i++) {
    const item = document.createElement('li');
    item.textContent = data[i];
    fragment.appendChild(item);
   }
   
   list.appendChild(fragment);

3. 概要

この記事では、ページの再描画とリフローを回避するためのいくつかの方法を紹介し、具体的なコード例を示します。これらの方法を適切に使用することで、フロントエンド開発者はページの再描画とリフローを効果的に削減し、Web ページのパフォーマンスを向上させ、より良いユーザー エクスペリエンスを提供できます。実際の開発では、開発者は特定のシナリオに基づいて最適化を行い、Web ページのパフォーマンスをさらに向上させることもできます。

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