过多得操作DOM会降低WEB应用的性能

我不是女神ヾ 2023-06-04 03:58 36阅读 0赞

平时在工作中，要优化自己开发的WEB应用的性能，一般是遵循以下几个原则：

1.减少网络请求。

2.压缩、合并静态资源文件，以此来减轻网络传输的带宽压力和资源消耗。

3.代码逻辑层面上的性能优化、比如减少循环次数、减少DOM操作的次数（减少DOM的获取与修改次数）等。

这里就来讲一下为什么DOM操作会影响WEB应用的性能。

**DOM与ES的关系**

DOM（Document Object Model，文档对象模型）是一个独立于语言的、用于操作XML和HTML文档的程序接口（API），我们可以通过调用其中的方法函数并传入指定的参数来使用。DOM在浏览器中主要用于与HTML文档打交道，并且使用DOM API来访问文档中的数据。DOM是个与ES语言无关的API，它在浏览器中的接口却是用JavaScript来实现的，因此DOM就成了现在JS编码中的重要部分。

在各大浏览器中，DOM的位置与JavaScript的位置是相互独立的（渲染引擎与JS引擎相互独立）

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>JS位置</th> 
   <th>DOM位置</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>IE</td> 
   <td>JavaScript的实现名为JScript，位于jscript.dll文件中</td> 
   <td>DOM的实现则存在另一个库中，名为mshtml.dll（内部称为trident）</td> 
  </tr> 
  <tr> 
   <td>safari</td> 
   <td>JavaScript部分是由独立的SquirelFish引擎来实现。</td> 
   <td>DOM和渲染是使用webkit中的webcore实现</td> 
  </tr> 
  <tr> 
   <td>google chrome</td> 
   <td>JavaScript引擎是他们自己研发的，名为V8。</td> 
   <td>使用webkit中的webCore库来渲染页面</td> 
  </tr> 
  <tr> 
   <td>firefox</td> 
   <td>JavaScript引擎名为TraceMonkey</td> 
   <td>渲染引擎Gecko</td> 
  </tr> 
 </tbody> 
</table>

ES操作DOM需要消耗性能

ES是通过DOM接口来获取文档中的元素的，正因为浏览器中通常把DOM和ECMAScript独立实现，使得二者相互独立，就像两座孤岛，所以ES每次操作DOM时，ES和DOM之间就像两个孤岛之间需要建立连接。而每次连接就都需要搭建一个桥梁，搭桥还是小事，ES请求DOM的车辆过桥时，会经过一个收费站，每次都会被收费，需要JS引擎消耗浏览器的性能进行缴费。而车辆通过后桥就会被销毁，等到下次连接又要重新搭桥二次缴费，所以说JS与DOM之间的每次连接都需要消耗性能 。当然了，浏览器引擎实际上也有相应的应对优化措施，具体是产生一个临时队列存放ES对DOM的操作指令，相当于批量操作DOM，即在一次连接中进行多个DOM操作，一定程度上也优化了性能。

另外，每次操作DOM都需要先对DOM进行访问，这样也会消耗性能。在此基础上，因为修改DOM又会导致浏览器重新计算页面的几何变化，引发浏览器模板引擎的重排（回流-回滚流程）和重绘，进而更加消耗性能。也正因此，所以就有了每操作一次DOM就多做点事的理念。即尽可能以最少的次数处理最多的DOM操作，以实现每过一次桥多拉点货的效果。特别提及一下，VUE也正是这种理念，即操作虚拟DOM减少性能消耗，因此VUE性能优异。

**浏览器的渲染引擎的步骤**

浏览器下载完页面中的所有资源（比如HTML、JavaScript、CSS、图片等）后，会发生如下的6步过程：

1.解析HTML，构建DOM树（DOM Tree）。

2.解析CSS，生成CSS规则树（CSSOM Tree）。

3.合并DOM树和CSS规则树，生成渲染树render树（render Tree）。

4.布局render树，根据生成的render树来对各元素尺寸、位置进行计算，得到每个节点的几何信息。（根据视口的大小来计算元素的位置和大小）（重排会走这一步）。

5.绘制render树，绘制页面像素信息（根据render树上每个节点的几何信息，得到每个节点的像素数）（重绘会走这一步）。

6.浏览器将各层节点的像素信息发送给GPU，GPU将各层合成、绘制展示到页面上。

**浏览器渲染引擎的重排和重绘**

重排

当DOM的变化影响了元素的几何属性（宽和高），浏览器需要重新计算元素的几何属性，同样其他相邻元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程被称为重排。

换句话说，改变了页面中某元素的位置、尺寸大小，进而也就改变了他的占地面积。那这个元素修改了占地面积后，其后紧邻的元素就得挪动位置。给她让地儿（或者向前赶赶）。紧邻的元素挪动了，那紧邻元素后边的元素也会连锁效应式的修改。这就好比一排人排队。前边的人突然变胖了、变瘦了、向前挪了、向后挤了、都会导致队伍中后边的人也跟随之改变位置，由此导致一连串的人都挪动位置。这时浏览器就要重新排版各个受到影响的元素的位置。反映在渲染引擎的工作流程中也就是浏览器需要重新计算元素位置信息并布局render树，这就是重排。

重排会占用和消耗CPU资源，影响性能。

重绘

完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

因为重排在重绘的上一步，所以重排发生后自然会导致重绘。

重绘会占用和消耗GPU资源，影响性能。

**总结**

综合上面所说，这里简单总结一下为什么过多得操作DOM会降低WEB应用的性能。

1.ES和DOM是相互独立的两个个体，它们之间的每次连接都需要消耗性能。

2.操作DOM会导致重排和重绘。重排会占用和消耗CPU，重绘则会占用和消耗GPU。

因此，在开发过程中我们要尽量减少操作DOM。

"相对于一眼望不到头的日子，有的人更愿意选择一眼能望到头的日子。"

转载于:https://www.cnblogs.com/yanggb/p/11568242.html