一般的なリフローおよび再描画の問題と解決策。特定のコード例が必要です。
Web 開発では、パフォーマンスの最適化が重要なトピックです。リフローと再描画は、Web ページのレンダリング中に発生する一般的なパフォーマンスの問題であり、ページのフリーズやリソースの浪費を引き起こす可能性があります。この記事では、一般的なリフローと再描画の問題を紹介し、開発者がページのパフォーマンスを最適化するのに役立ついくつかの解決策を提供します。
1. リフローと再ペイントの概念
2. リフローと再描画の一般的な問題と解決策
DOM を変更するとき構造化またはスタイル化されると、ブラウザーは要素の位置とサイズを再計算し、要素を再描画します。たとえば、JavaScript を通じて要素のスタイルを頻繁に変更すると、継続的なリフローと再描画が発生し、ページがフリーズします。
解決策: DOM 操作を最小限に抑えます。複数の変更を 1 つに統合したり、JavaScript アニメーションの代わりに CSS アニメーションを使用して再描画の回数を減らすことができます。
サンプル コード:
// 不推荐的方式 element.style.width = '100px'; element.style.height = '100px'; element.style.marginLeft = '10px'; element.style.marginTop = '10px'; // 推荐的方式 element.style.cssText = 'width: 100px; height: 100px; margin-left: 10px; margin-top: 10px;';
JavaScript では、特定の要素 (offsetTop、offsetLeft など) の属性を取得します。 、scrollTop など)によりレイアウトが強制的に同期され、リフローが引き起こされる可能性があります。
解決策: これらのプロパティを頻繁に取得しないようにしてください。キャッシュまたはバッチ取得によってリフローの回数を減らすことができます。
サンプル コード:
// 不推荐的方式 for (let i = 0; i < elements.length; i++) { const element = elements[i]; const top = element.offsetTop; // 其它处理 } // 推荐的方式 let tops = []; for (let i = 0; i < elements.length; i++) { tops.push(elements[i].offsetTop); }
ウィンドウ サイズが変更されると、ブラウザはページを再計算します。レイアウト。リフローと再描画が発生します。
解決策: ウィンドウ サイズが頻繁に変更されるのを避けるために、スロットル関数を使用して、ウィンドウ サイズの変更に対するコールバック関数の実行頻度を制御できます。
サンプル コード:
// 不推荐的方式 window.addEventListener('resize', handleResize); // 推荐的方式 function throttle(fn, delay) { let timer = null; return function () { if (!timer) { timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay); } }; } window.addEventListener('resize', throttle(handleResize, 200));
3. 結論
リフローと再描画の問題は、Web 開発における一般的かつ重要なパフォーマンス最適化の問題です。 DOM 操作を削減し、レイアウトの強制同期を回避し、ウィンドウ サイズを頻繁に変更することにより、リフローと再描画を効果的に削減し、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。この記事で提供されるソリューションとサンプル コードが、開発者によるページのパフォーマンスの最適化に役立つことを願っています。
以上が一般的なリフローおよび再描画の問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。