HTML のリフローと再描画を削減するための主要な戦略: フロントエンドのパフォーマンスの最適化

フロントエンドのパフォーマンスの最適化: HTML のリフローと再描画を削減するための重要な手順。具体的なコード例が必要です。

Web アプリケーションの急速な開発に伴い、ユーザーの期待はますます高まっています。 Web ページのパフォーマンス要件もますます高くなっています。フロントエンドのパフォーマンスの最適化は、高パフォーマンスの Web ページを実現するための重要な部分です。フロントエンドのパフォーマンスの最適化では、HTML のリフローと再描画を減らすことが重要な方向性です。

HTML リフロー (リフロー) は、ブラウザーが Web ページの一部または全体を再レンダリングするプロセスを指します。 DOM 構造が変更され、ページ コンテンツが変更され、ページ サイズが変更され、スタイルが変更されるたびに、ブラウザは要素の幾何学的属性を再計算して再レイアウトする必要があり、このプロセスによりパフォーマンスが低下します。 HTMLの再描画（リペイント）とは、ブラウザが新たな計算結果に基づいてページを再描画する処理のことを指します。

HTML のリフローと再描画を減らすには、次の重要な手順を実行できます。

1. JavaScript アニメーションの代わりに CSS3 アニメーションを使用します。CSS3 アニメーションを使用すると、ブラウザのハードウェア アクセラレーションを最大限に活用できます。リフローと再描画の数を減らします。対照的に、JavaScript で実装されたアニメーションは、多くのリフローおよび再描画操作をトリガーする傾向があります。以下は、CSS3 アニメーションを使用したサンプル コードです。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s;
}

2. DOM 要素のバッチ操作: JavaScript では、DOM 要素の頻繁な操作は、リフローと再描画の一般的な原因の 1 つです。この状況の発生を減らすためには、DOM のバッチ操作を使用するようにしてください。たとえば、DocumentFragment を使用して要素をバッチで挿入したり、display: none を使用して要素を非表示にし、再度表示する前に複数回変更したりすることができます。以下は、DOM 要素のバッチ操作のサンプル コードです。

var fragment = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {
  var div = document.createElement('div');
  div.textContent = 'Item ' + i;
  fragment.appendChild(div);
}

document.body.appendChild(fragment);

3. 仮想リスト テクノロジを使用する: 大量のデータを表示する必要がある場合、仮想リスト テクノロジを使用すると、パフォーマンスが大幅に向上します。 。仮想リストは、現在表示されている要素のすべてではなく、一部のみをレンダリングします。これにより、ページ内の DOM ノードの数が減り、リフローと再描画の回数が減ります。以下は、仮想リストのサンプル コードです。

var list = document.getElementById('list');
var items = [];

for (var i = 0; i < 1000000; i++) {
  items.push('Item ' + i);
}

window.addEventListener('scroll', function() {
  var scrollTop = window.scrollY;
  var start = Math.floor(scrollTop / 30);
  var end = Math.ceil((scrollTop + window.innerHeight) / 30);

  list.innerHTML = items.slice(start, end).join('');
});

上記の主要な手順を実装することで、HTML のリフローと再描画の数を大幅に減らすことができ、それによって、パフォーマンスとユーザー エクスペリエンスが向上します。ウェブページ。もちろん、上記のサンプル コードに加えて、リフローと再描画を削減するために使用できる最適化手法は他にも多数あり、特定のアプリケーション シナリオに従って選択して調整する必要があります。継続的な練習と最適化により、より効率的な Web ページを作成できます。

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