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

フロントエンドのパフォーマンスの向上: 再描画とリフローを回避するためのヒントと方法

フロントエンド開発では、パフォーマンスの最適化が重要なトピックです。その中でも、不必要な再描画 (Repaint) と再フロー (Reflow) 操作を回避することが、ページのパフォーマンスを向上させる鍵となります。この記事では、開発者が再描画とリフローを回避するのに役立ついくつかのテクニックと方法を紹介し、具体的なコード例を示します。

1. 再描画とリフローとは

1. 再描画: DOM 要素のスタイルが変更されても、その幾何学的プロパティ (位置やサイズなど) には影響しない場合、ブラウザーは再描画操作が実行されます。再描画とは、レイアウトに影響を与えることなく要素の視覚効果を更新することを指します。
2. リフロー: DOM 要素の幾何学的プロパティが変更されると、ブラウザは要素の幾何学的プロパティを再計算し、ページを再レイアウトする必要があります。このプロセスはリフローと呼ばれます。

再描画とリフローは一定のパフォーマンスの消費を引き起こします。これらが頻繁に発生すると、ページのパフォーマンスに重大な影響を及ぼします。

2. 再描画とリフローを回避するためのヒントと方法

1. スタイルの代わりにクラスを使用する: 要素のスタイルを設定するときは、直接操作するのではなく、クラスを使用して要素のスタイルを変更するようにしてください。 it 要素のスタイル属性。 style 属性を変更するとリフロー操作が発生するため、クラスを使用してスタイルを変更しても再描画がトリガーされるだけです。

サンプル コード:

// 不推荐的写法
element.style.width = '200px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐的写法
element.classList.add('custom-style');

2. ドキュメント フラグメント (DocumentFragment) を使用する: 多数の DOM 要素をページに追加する場合、最初にこれらの要素をドキュメントに追加できます。フラグメントを作成し、ドキュメントを一度に挿入することで、リフローの回数を減らすことができます。

サンプルコード:

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.innerHTML = 'Element ' + i;
  fragment.appendChild(div);
}

document.getElementById('container').appendChild(fragment);

3. 上/左の代わりにtransformを使用: 要素の位置を変更する必要がある場合は、直接ではなくtransform属性を使用してみてください。上と左の left 属性を変更します。変換を使用してもリフロー操作はトリガーされないため、上部と左側のプロパティを直接変更すると、ブラウザーは要素のレイアウトを再計算します。

サンプルコード:

// 不推荐的写法
element.style.top = '100px';
element.style.left = '200px';

// 推荐的写法
element.style.transform = 'translate(200px, 100px)';

4. 仮想 DOM を使用する (仮想 DOM): 仮想 DOM は、仮想 DOM と実際の DOM の違いを比較することで、メモリ内のデータ構造になります。 、ページの再描画とリフロー操作を最小限に抑えます。いくつかの一般的なフロントエンド フレームワーク (React、Vue など) を使用すると、仮想 DOM の操作が自動的に容易になります。

サンプル コード:

// 使用 React 创建虚拟 DOM
const element = <div>Hello, World!</div>;

// 将虚拟 DOM 导入真实 DOM
ReactDOM.render(element, document.getElementById('root'));

概要:

再描画とリフローは、フロントエンドのパフォーマンスの最適化において特別な注意が必要な問題です。スタイルの代わりにクラスを使用し、ドキュメントのフラグメントを使用し、上/左の代わりに変換を使用し、仮想 DOM やその他の技術やメソッドを使用することにより、ページの再描画とリフロー操作を大幅に削減し、ページのパフォーマンスを向上させることができます。実際の開発では、開発者は常にページのパフォーマンスに注意を払い、上記の最適化のヒントと方法に従うことをお勧めします。

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