频繁访问和修改DOM元素会触发浏览器重新计算页面几何布局，导致性能显著下降。本文通过对比循环中直接操作innerHTML与使用局部变量缓存结果的两种实现方式，说明减少DOM访问次数的必要性。建议将更新内容暂存于局部变量，循环结束后一次性写入DOM，从而提升代码执行效率。
减少访问DOM次数提升JavaScript性能
访问DOM元素本身存在性能开销，而修改DOM元素的代价更为高昂，因为这会迫使浏览器重新计算页面的几何布局与渲染。
最糟糕的情况发生在循环中反复访问和修改元素，尤其是当对HTML元素集合进行迭代操作时。
例如：
代码如下:
<!-- 优化前 -->
<script type="text/javascript">
function innerHTMLLoop () {
for(var count = 0; count < 15000; count++){
document.getElementById('here').innerHTML+='a';
}
}
</script>该函数通过循环修改页面元素的内容。问题在于，每次循环迭代都会访问该元素两次：一次读取innerHTML属性，另一次将其重写。
更高效的策略是使用局部变量存储累积后的内容，并在循环结束后一次性写入DOM：
代码如下:
<!-- 优化后 -->
<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的访问次数。