リッチ インターネット アプリケーション (RIA) を開発する場合、ページ要素を変更または追加するための JavaScript スクリプトを作成することがよくありますが、これらのタスクは最終的に DOM (ドキュメント オブジェクト モデル) によって完了され、実装方法はアプリケーションの応答速度に影響します。
DOM操作によりブラウザは再解析 (リフロー) を実行します。これは、ページ要素の表示方法を決定するブラウザの計算プロセスです。 DOM を直接変更したり、要素の CSS スタイルを変更したり、ブラウザ ウィンドウ サイズを変更すると、再解析がトリガーされます。 offsetHeithe や offsetWidth などの要素のレイアウト プロパティを読み取ると、再解析もトリガーされます。再解析には計算時間がかかるため、再解析のトリガーが少なくなるほど、アプリケーションは高速になります。
DOM 操作は通常、既存のページ要素を変更するか、新しいページ要素を作成します。次の 4 つの最適化ソリューションは、DOM ノードを変更および作成する 2 つの方法をカバーしており、ブラウザーの再解析をトリガーする回数を減らすのに役立ちます。
解決策 1: CSS クラス名を切り替えて DOM を変更する
このソリューションにより、要素とその子要素の複数のスタイル属性を一度に変更し、再解析を 1 回だけトリガーすることができます。
必要：
(エミュ注: 元の記事の作成者は、これを書いたときに明らかに脳がショートしていて、その後のアウトオブザフロー DOM 操作モードで解決される問題をここに置いています。ただし、それはデモコードから作者を理解するのが簡単です。私が本当に説明したい問題なので、エミュは原文を再現しません）
次に、ハイパーリンクのいくつかのスタイル ルールを変更する関数を作成する必要があります。実装は非常に簡単で、これらのルールに対応する属性を 1 つずつ変更するだけです。ただし、問題は、スタイル属性が変更されるたびに、ページの再解析が発生することです。
関数 selectAnchor(要素) {
element.style.fontWeight = '太字';
element.style.textDecoration = 'なし';
element.style.color = '#000';
}
解決：
この問題を解決するには、まずスタイル名を作成し、このクラス名に変更するすべてのスタイル ルールを追加します。次に、この新しいクラス名をハイパーリンクに追加します。これにより、いくつかのスタイル ルールを追加できるようになり、再解析のみが可能になります。引き起こされた。このモデルのもう 1 つの利点は、パフォーマンスとロジックの分離も実現できることです。
.selectedAnchor {
フォントの太さ: 太字;
テキスト装飾: なし。
色: #000;
}
関数 selectAnchor(要素) {
element.className = 'selectedAnchor';
}