高性能WEB开发：DOM编程

　　我们知道，DOM是用于操作XML和HTML文档的应用程序接口，用脚本进行DOM操作的代价很昂贵。有个贴切的比喻，把DOM和Javascript（这里指ECMscript）各自想象为一个岛屿，它们之间用收费桥梁连接，ECMAscript每次访问DOM，都要途径这座桥，并交纳“过桥费”，访问DOM的次数越多，费用也就越高。因此，推荐的做法是尽量减少过桥的次数，努力待在ECMAscript岛上。我们不可能不用DOM的接口，那么，怎样才能提高程序的效率？

1、DOM访问与修改

　　访问DOM元素是有代价的，修改元素代价更是昂贵，因为它会导致浏览器重新计算页面的几何变化（重排和重绘）。

　　当然最坏的情况是在循环中访问或者修改元素，看下面两段代码：

复制代码
var times = 15000;
// code1
console.time(1);
for(var i = 0; i < times; i++) { 
　　document.getElementById(‘myDiv1‘).innerHTML += ‘a‘;
}
console.timeEnd(1);

// code2
console.time(2);
var str = ‘‘;
for(var i = 0; i < times; i++) { 
　　str += ‘a‘;
}
document.getElementById(‘myDiv2‘).innerHTML = str;
console.timeEnd(2);
复制代码

　　结果第一次运行的时间居然是第二次的千倍！

1: 2846.700ms           2: 1.046ms

　　第一段代码的问题在于，每次循环迭代，该元素都会被访问两次：一次读取innerHTML的值，另一次重写它，也就是说，每次循环都在过桥！结果充分表明，访问DOM的次数越多，代码的运行速度越慢。因此，能减少DOM访问的次数则尽量减少，尽量留在ECMAscript这端处理。

2、HTML集合 & 遍历DOM

    操作DOM另一个耗能点就是遍历DOM，一般我们会收集一个HTML集合，比如用getElementsByTagName()，或者用document.links等，我想大家对此都不陌生。收集的结果是一个类似数组的集合，它处于一种“实时状态”实时存在，这意味着当底层文档对象更新时，它也会自动更新。怎么讲？很简单举个栗子：

复制代码
<body><ul id="fruit"> <li> apple </li> <li> orange </li> <li> banana </li> </ul></body>
<script. type="text/javascript"> 
var lis = document.getElementsByTagName('li'); 
var peach = document.createElement('li'); 
peach.innerHTML = 'peach'; 
document.getElementById('fruit').appendChild(peach); 
console.log(lis.length); // 4
</script>
复制代码

　　而这正是低效之源！很简单，跟数组的优化操作一样，缓存个length变量就ok了（读取一个集合的length比读取一个普通数组的lengh要慢很多，因为每次都要查询）。

复制代码
var lis0 = document.getElementsByTagName('li');
var str0 = '';
for(var i = 0; i < lis0.length; i++) { 
    str0 += lis0[i].innerHTML;
}

var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) { 
    str1 += lis1[i].innerHTML;
}
复制代码

　　我们看看性能提升能有多少？1: 0.974ms        2: 0.664ms

　　当集合的长度大的时候，性能提升还是很明显的。

3、最后介绍两个原生DOM方法，querySelector()和querySelectorAll()

　　相信大家都不陌生，前者返回一个数组（注意，它们的返回值不像HTML集合一样会动态变化），后者返回匹配的第一个元素。好吧，其实并不是所有时候它的性能都优于前者的HTML集合遍历。

var lis1 = document.getElementsByTagName('li');
var lis2 = document.querySelectorAll('li');
// 1: 0.038ms    
// 2: 3.957ms

　　但是因为它是类似CSS的选择方法，所以在做组合选择的时候，效率会提升，又方便。比如做如下的组合查询：

var elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning,div.notice');

 

posted @   古兰精  阅读(361)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae