我们知道DOM是操作XML和HTML文件的应用程序接口，它是使用脚本DOM操作昂贵。存在着密切的比喻，DOM和Javaｓｃｒｉｐｔ（ECMｓｃｒｉｐｔ）自己作为一个岛国的想象，他们与收费桥梁，每次访问ECMAｓｃｒｉｐｔ DOM，接近的桥梁，并支付收费，更多的DOM访问数量，成本高。因此，建议的做法是减少桥梁数量，尽量保持在ECMAｓｃｒｉｐｔ岛。我们使用DOM接口是不可能的，那么我们该如何提高程序的效率

1、DOM访问和修改

访问DOM元素非常昂贵。（桥费，你懂的），改性元素的成本更加昂贵，因为它会导致浏览器重新计算页面的几何变化（重排和重绘）。

当然，最糟糕的事情是访问或修改循环中的元素，并查看下面两段代码：


var时间= 15000；

/ /代码
（1）console.time；
对于（var i = 0；i <次数；i + +）{
document.getelementbyid（'mydiv1）.innerHTML = A；
}
（1）console.timeend；

/ /代码2
（2）console.time；
var=；
对于（var i = 0；i <次数；i + +）{
STR = A；
}
document.getelementbyid（'mydiv2）.innerHTML = str；
（2）console.timeend；




第一次跑的结果是第二次的一千倍！（Chrome版本44.0.2403.130 m）


1：2846.700ms
2：1.046ms



的第一个代码的问题是每一个循环迭代会访问两次：读innerHTML一时间的价值，并重新在另一个时间，也就是说，每一个周期是过桥（重排和重绘将在接下来的演讲中解释）。结果充分表明，更多的许多访问DOM，较慢的代码的速度。因此，DOM的访问次数可以减少ECMAｓｃｒｉｐｔ处理尽可能多尽可能。

2，HTML集遍历DOM

要操作DOM，另一个能量点是遍历DOM。总的来说，我们将收集HTML设置，如getElementsByTagName（），或document.links。我想您对这个不熟悉。集合的结果是一个类似于数组的集合，它处于实时状态，这意味着当底层文档对象被更新时，它也会自动更新。栗子很简单：




苹果
橙色
香蕉



VaR LIS = document.getelementsbytagname（李的）；
VaR桃= document.createelement（李的）；
peach.innerhtml = 'peach；
document.getelementbyid（'fruit）AppendChild（桃）；

console.log（LIS的长度）； / / 4





这就是效率低下的根源！很简单，就像数组的优化操作一样，长度变量的缓存是可以的。（读一套长度比阅读能力，常见的阵列要慢得多，因为它需要查询一次）。


（0）console.time；
无功lis0 = document.getelementsbytagname（李的）；
无功str0 =；
对于（var i = 0；i < lis0.length；i++）{
str0 = lis0 {我} .innerHTML；
}
（0）console.timeend；


（1）console.time；
VaR LIS1 = document.getelementsbytagname（李的）；
var str1 =；
对于（var i = 0，len = lis1.length；我< len；i++）{
str1 = LIS1 {我} .innerHTML；
}
（1）console.timeend；




让我们看看有多少性能可以提高。


0：0.974ms
1：0.664ms



当集合的长度较大时（演示为1000），性能改进仍然很明显。

高性能Javaｓｃｒｉｐｔ提出了另一种优化策略，指出由于遍历数组集合比遍历更快，所以如果第一集的元素复制到数组中，然后访问其属性会更快，测试，并不能很好的找到规律，他们仍然这样做不是多此一举，测试代码如下：（疑问欢迎探讨与我交流）


（1）console.time；
VaR LIS1 = document.getelementsbytagname（李的）；
var str1 =；
对于（var i = 0，len = lis1.length；我< len；i++）{
str1 = LIS1 {我} .innerHTML；
}
（1）console.timeend；


（2）console.time；
无功lis2 = document.getelementsbytagname（李的）；
var = { }；
对于（var i = 0，len = lis2.length；我< len；i++）
一个{我} = lis2 {我}；

VaR str2 =；
对于（var i = 0，len = a.length；我< len；i++）{
str2 =一个{我} .innerHTML；
}
（2）console.timeend；




At the end of this section, we introduce two native DOM methods, querySelector () and querySelectorAll (), which are not unfamiliar to you. 前者返回一个数组（注意它们的返回值将动态地更改为HTML集），这将返回匹配的第一个元素。


（1）console.time；
VaR LIS1 = document.getelementsbytagname（李的）；
（1）console.timeend；

（2）console.time；
无功lis2 = document.queryselectorall（李的）；
（2）console.timeend；

1： / / 0.038ms
2： / / 3.957ms



但是，由于它类似于CSS选择方法，所以在进行组合选择时，效率会得到提高和方便：


var elements = document.queryselectorall（' #菜单）；
var elements = document.queryselectorall（' div.warning，div.notice）；



以上是关于高性能javaｓｃｒｉｐｔ DOM编程的全部内容，希望大家能理解，供大家学习帮助。