DOM要素へのアクセスにはコストがかかり、DOM要素の変更は、ブラウザがページの幾何学的な変更を再計算するため、さらに高価です。
もちろん、最悪の場合は、ループの変更された要素、特にHTML要素コレクションのループ操作にアクセスすることです。
例えば:
コードコピーは次のとおりです。
<! - 最適化前 - >
<script type = "text/javascript">
function innerhtmlloop(){
for(var count = 0; count <15000; count ++){
document.getElementById( 'here')。innerhtml+= 'a';
}
}
</script>
この関数は、ページ要素のコンテンツを変更するためにループします。このコードの問題は、各ループイテレーションである要素に2回アクセスされることです。10intmlプロパティを読み、書き直したことです。
より効率的なアプローチは、ローカル変数を使用して更新されたコンテンツを保存し、ループが終了した後一度にそれを書き込むことです。
コードコピーは次のとおりです。
<! - 最適化後 - >
<script type = "text/javascript">
function innerhtmlloop(){
var content = '';
for(var count = 0; count <15000; count ++){
content+= 'a';
}
document.getElementById( 'here')。innerhtml+= content;
}
</script>
DOMにアクセスする回数が多いほど、コードの実行が遅くなります。したがって、それらを置き換える他のソリューションがある場合、DOMへの訪問の数を最小限に抑えるようにする必要があります。