DOM アクセスの数を減らし、JavaScript のパフォーマンスを向上させる_JavaScript のヒント

DOM 要素へのアクセスにはコストがかかりますが、DOM 要素の変更にはブラウザがページの幾何学的変更を再計算するため、さらにコストがかかります。

もちろん、最悪のシナリオは、ループ内で変更された要素にアクセスすること、特に HTML 要素のコレクションに対するループ操作です。

例:

コードをコピーします コードは次のとおりです:

この関数はループして変更しますページ要素のコンテンツ。このコードの問題は、各ループ反復で要素が 2 回アクセスされることです。1 回目は innerHTML 属性の読み取り、もう 1 回目はその属性の書き換えです。

より効率的なアプローチは、ローカル変数を使用して更新されたコンテンツを保存し、ループ終了後にそれをすべて一度に書き込むことです。

コードをコピー コードは次のとおりです。

DOM へのアクセス回数が増えると、コードの実行が遅くなります。したがって、他の代替手段がある場合は、DOM アクセスの数を減らすように努める必要があります。