CSS を最適化してページのリフローと再描画を減らすためのヒント

不要な CSS リフローと再描画を回避する方法

フロントエンド開発において、CSS は不可欠な部分です。ただし、CSS を不適切に使用すると、ページのパフォーマンスが低下する可能性があり、最も一般的な問題は不必要な CSS のリフローと再描画です。この記事では、これらの問題を回避し、ページのパフォーマンスを向上させるのに役立ついくつかのヒントと具体的なコード例を紹介します。

1. スタイルの頻繁な更新を避ける

リフローと再描画は DOM 要素のスタイル属性の変更に基づいてトリガーされるため、スタイルを頻繁に更新するとリフローと再描画のリスクが高まります。頻度。この問題を回避するには、スタイルの更新を 1 つの操作に集中させることで、リフローと再描画の回数を減らすことができます。たとえば、要素の複数のスタイル属性を変更する必要がある場合、属性を 1 つずつ変更する代わりにクラスを追加できます。サンプル コードは次のとおりです。

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

// 推荐的写法
element.classList.add('my-class');

2. ループ内でのスタイルの変更を避ける

変更ごとにリフローとリフローが発生するため、ループ内でのスタイル プロパティの変更はよくある問題です。 。 描きました。この問題を回避するには、スタイル プロパティの計算と変更をループの外に移動します。サンプル コードは次のとおりです。

// 不推荐的写法
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = i * 10 + 'px';
}

// 推荐的写法
let styles = '';
for (let i = 0; i < elements.length; i++) {
  styles += `#${elements[i].id} { width: ${i * 10}px; }`;
}
element.styleSheet
  ? element.styleSheet.cssText = styles // IE
  : element.innerHTML = styles; // Others

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

JavaScript を使用してアニメーションを実装すると、リフローや再描画が頻繁に発生する可能性があります。対照的に、CSS アニメーションを使用すると、ハードウェア アクセラレーションを活用できるため、より効率的になります。サンプル コードは次のとおりです。

/* CSS */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* JavaScript */
element.classList.add('spin');

4. CSS3 プロパティを使用してパフォーマンスを最適化する

CSS3 には、リフローと再描画のパフォーマンスを最適化できるいくつかのプロパティが導入されています。たとえば、要素の位置を変更するには、left と top の代わりに transform を使用します。また、ハードウェア アクセラレーションをオンにするには、translate3d を使用します。 。サンプル コードは次のとおりです。

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

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

5. will-change 属性

##will-change 属性を使用して、ブラウザで要素の変更が発生することを確認し、事前に最適化します。 will-change 属性を使用すると、どのプロパティがリフローまたは再描画をトリガーする可能性があるかをブラウザーに知らせることができるため、事前に最適化を実行できます。サンプル コードは次のとおりです。

.element {
  will-change: transform;
}

まとめ

スタイルの頻繁な更新を回避し、ループ内でスタイルを変更し、JavaScript アニメーションの代わりに CSS アニメーションを使用し、CSS3 プロパティを使用し、## を使用してパフォーマンスを最適化します。 #will-change

属性を使用すると、不必要な CSS リフローと再描画を効果的に回避し、ページのパフォーマンスを向上させることができます。もちろん、具体的な最適化方法も、プロジェクトのニーズや特定の状況に応じて調整および最適化する必要があります。

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