頻繁な再描画とリフロー: なぜ避けるべきなのでしょうか?

再描画とリフロー: なぜ頻繁に避けるべきなのでしょうか?

フロントエンド開発では、再描画とリフローという 2 つの概念をよく耳にします。これらは、ブラウザがページをレンダリングするときの 2 つの主要なプロセスを指します。再描画は、要素の外観が変更され、表示を更新する必要がある場合のプロセスを指します。リフローは、要素の幾何学的プロパティが変更され、レイアウトを再計算して再描画する必要がある場合のプロセスを指します。

再描画とリフローは、非常にパフォーマンスを消費する操作です。頻繁に実行すると、ページのパフォーマンスの低下につながり、さらにはラグやページの読み込み速度の低下を引き起こす可能性があります。したがって、開発中に頻繁な再描画やリフローを避けるために最善を尽くす必要があります。次に、再描画とリフローにつながる一般的な状況と、それらを回避する方法を見てみましょう。

1. DOM 要素のスタイルを頻繁に変更しないようにする

DOM 要素のスタイルを頻繁に変更すると、ブラウザによって再描画とリフローが頻繁にトリガーされます。したがって、DOM 要素のスタイルを変更する場合は、変更操作をマージし、要素のクラス名を変更することでスタイルの切り替えを実装するのが最善です。これにより、再描画とリフローの回数を減らすことができます。

// 不推荐写法
var element = document.getElementById('example');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐写法
var element = document.getElementById('example');
element.classList.add('active');

2. top/left 属性の代わりにtransform属性を使用してください

top/left属性を使用して要素の位置を変更すると、再描画とリフローがトリガーされます。変換属性 (translateX/translateY など) を使用して要素の位置を変更すると、リフローはトリガーされず、再描画のみがトリガーされます。したがって、要素の位置を変更する必要がある場合は、transform 属性を使用するのが最善です。

// 不推荐写法
var element = document.getElementById('example');
element.style.left = '100px';
element.style.top = '100px';

// 推荐写法
var element = document.getElementById('example');
element.style.transform = 'translate(100px, 100px)';

3. 要素のサイズ属性を頻繁に読み取ることは避けてください

要素のサイズ属性 (offsetWidth、offsetHeight など) が読み取られるたびに、リフローがトリガーされます。の値は、比較的パフォーマンスを消費する操作です。したがって、要素のサイズプロパティを頻繁に読み取らないようにし、これらの値をキャッシュしたり、必要に応じて一度に取得したりする必要があります。

// 不推荐写法
var element = document.getElementById('example');
var width = element.offsetWidth;
var height = element.offsetHeight;

// 推荐写法
var element = document.getElementById('example');
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;

4. documentFragment を使用してノードの複数の挿入を最適化する

ノードの挿入は、リフローをトリガーする操作です。ノードを複数回挿入する必要がある場合は、次のようにするのが最善です。 documentFragment を使用して最適化します。 documentFragment に複数のノードを追加し、それらを一度に DOM に挿入します。

// 不推荐写法
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  document.body.appendChild(element);
}

// 推荐写法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

上記の側面の最適化により、再描画とリフローの数を効果的に削減し、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。実際の開発では、Chrome DevTools やパフォーマンス分析ツールなど、再描画やリフローの問題の検出と最適化に役立ついくつかのツールやライブラリを使用することもできます。

要約すると、再描画とリフローはページのパフォーマンスに影響を与える重要な要素であり、フロントエンド開発ではできるだけ頻繁に回避する必要があります。スタイルの変更をマージし、transform 属性を使用し、size 属性の頻繁な読み取りを回避し、documentFragment を使用して複数のノードの挿入を最適化することで、ページのパフォーマンスを効果的に最適化し、ユーザー エクスペリエンスを向上させることができます。

以上が頻繁な再描画とリフロー: なぜ避けるべきなのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。