不要な CSS リフローと再描画を回避する方法
フロントエンド開発において、CSS は不可欠な部分です。ただし、CSS を不適切に使用すると、ページのパフォーマンスが低下する可能性があり、最も一般的な問題は不必要な CSS のリフローと再描画です。この記事では、これらの問題を回避し、ページのパフォーマンスを向上させるのに役立ついくつかのヒントと具体的なコード例を紹介します。
リフローと再描画は DOM 要素のスタイル属性の変更に基づいてトリガーされるため、スタイルを頻繁に更新するとリフローと再描画のリスクが高まります。頻度。この問題を回避するには、スタイルの更新を 1 つの操作に集中させることで、リフローと再描画の回数を減らすことができます。たとえば、要素の複数のスタイル属性を変更する必要がある場合、属性を 1 つずつ変更する代わりにクラスを追加できます。サンプル コードは次のとおりです。
// 不推荐的写法 element.style.width = '100px'; element.style.height = '200px'; element.style.background = 'red'; // 推荐的写法 element.classList.add('my-class');
変更ごとにリフローとリフローが発生するため、ループ内でのスタイル プロパティの変更はよくある問題です。 。 描きました。この問題を回避するには、スタイル プロパティの計算と変更をループの外に移動します。サンプル コードは次のとおりです。
// 不推荐的写法 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
JavaScript を使用してアニメーションを実装すると、リフローや再描画が頻繁に発生する可能性があります。対照的に、CSS アニメーションを使用すると、ハードウェア アクセラレーションを活用できるため、より効率的になります。サンプル コードは次のとおりです。
/* CSS */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* JavaScript */ element.classList.add('spin');
CSS3 には、リフローと再描画のパフォーマンスを最適化できるいくつかのプロパティが導入されています。たとえば、要素の位置を変更するには、left
と top
の代わりに transform
を使用します。また、ハードウェア アクセラレーションをオンにするには、translate3d
を使用します。 。サンプル コードは次のとおりです。
/* 不推荐的写法 */ element.style.left = '100px'; element.style.top = '200px'; /* 推荐的写法 */ element.style.transform = 'translate(100px, 200px)';
will-change
属性##will-change 属性を使用して、ブラウザで要素の変更が発生することを確認し、事前に最適化します。
will-change 属性を使用すると、どのプロパティがリフローまたは再描画をトリガーする可能性があるかをブラウザーに知らせることができるため、事前に最適化を実行できます。サンプル コードは次のとおりです。
.element { will-change: transform; }
属性を使用すると、不必要な CSS リフローと再描画を効果的に回避し、ページのパフォーマンスを向上させることができます。もちろん、具体的な最適化方法も、プロジェクトのニーズや特定の状況に応じて調整および最適化する必要があります。
以上がCSS を最適化してページのリフローと再描画を減らすためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。