前言：随着vue、react、angular的流行，我们现在可能不用经常操作DOM了。三大框架在二次交互的运营上发挥了很大的优势。因为我们知道用脚本操作DOM是非常昂贵的，所以本文重点介绍您可能不知道的常规DOM操作。浏览器中的DOM首先，让我们了解一下什么是DOM，为什么它很慢？DOM，本质上很慢文档对象模型(DOM)是W3C（万维网联盟）标准，是一种独立于语言的编程接口，用于操作XML和HTML文档。在浏览器中，主要处理HTML文档。DOM虽然是一个语言无关的API，但是它在浏览器中的接口是用JS实现的。但通常浏览器分别实现DOM和JS。比如Chrome中的DOM在webkit中是作为webCore实现的，但是js引擎是谷歌自己开发的V8。既然分开了，一旦需要将两者联系起来，就要付出代价。DOM的访问和修改前面提到，JS访问DOM会造成性能消耗。如果修改DOM元素，代价会更高，因为这会导致浏览器重新计算页面的几何变化。先看两段代码：第一段代码定义一个普通变量，进行循环累加，执行事件差不多。在第二段代码中，每个循环访问一个特定元素两次：第一次读取元素的innerHTML属性，第二次重写它。可以看到它的执行时间接近2.8s，而且这段脚本会一直阻塞后续的执行。看清了这里，不难得到一个更高效的版本：每次更新后用一个局部变量包裹内容，等待循环结束，一次性写入页面（尽可能工作）对于js部分）。可以看出快了将近2000倍。明显的。您访问DOM的次数越多，代码运行的速度就越慢。因此，一般的经验法则是：减少访问DOM的次数，尽量把操作交给JS。这也是Vue或者React设计虚拟dom的初衷之一：将负责的DOM模型映射成JS对象，不是直接操作DOM而是操作JS对象，最后进行innerHtml或者append。HTML集合先来看一段代码：varalldivs=document.getElementsByTagName('div');for(vari=0;i
