DOM操做的性能优化

DOM操做的真正问题在于 每次操做都会出发布局的改变、DOM树的修改和渲染。

React解决了大面积的DOM操做的性能问题，实现了一个虚拟DOM，即virtual DOM,这个咱们一条条讲。

因此关于DOM操做的性能优化主要包括：

1.查找元素的优化

2.尽可能避免或减小改变DOM（好比添加，修改，删除DOM）

3.减小改变DOM的样式类

4.批量修改DOM

5.减小Iframe

6.样式放在header中，脚本放在关闭标签</body>以前

7.就是我刚才所说的大名鼎鼎的Virtual DOM

 

1.查找元素的优化

查找元素尽可能使用ID，由于ID是惟一的，查找起来也是最快的。其次是根据类和类型查找元素，经过属性查找元素是最慢的。

 

 

2.尽可能避免或减小改变DOM（好比添加，修改，删除DOM）

改变DOM就会引发浏览器渲染，并且渲染是至关慢的，应米面没必要要的渲染

例如：

divUpdate.innerHTML = "";  
for ( var i=0; i<100; i++ )  
{  
 divUpdate.innerHTML += "<SPAN>This is a slower method! </SPAN>";  
}  

改成

var str="";  
 for ( var i=0; i<100; i++ )  
 {  
  str += "<SPAN>This is faster because it uses a string! </SPAN>";  
 }  
 divUpdate.innerHTML = str;  

  

3.减小改变DOM的样式类

 改变DOM元素的样式，类也会致使浏览器渲染，所以也应该减小没必要要的操做

例如：

 var el = document.getElementById('mydiv');   
el.style.borderLeft = '1px';   
el.style.borderRight = '2px';   
el.style.padding = '5px';   

改成：

var el = document.getElementById('mydiv');   
l.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';   

  

4.批量修改DOM

从文档流中先摘除该元素，对其应用多重改变，再将元素带回文档中，这样能够最小化重绘和重排。

具体方法：

一、隐藏元素，集中修改，而后再显示它

二、讲原始元素拷贝到一个脱离文档流的结点中，修改副本，而后覆盖原始元素

 

 

5.减小Iframe

iframe须要消耗大量的时间，并阻塞下载，建议少用

听说动态地给iframe添加url能够改善性能，未作测试

 

 

6.样式放在header中，脚本放在关闭标签</body>以前

样式放在header中，能够加快渲染，脚本放在关闭标签</body>以前能够加快下载速度，避免阻塞下载。

 

 

7.大名鼎鼎的Virtual DOM

Virtual DOM的核心思想是：批量操做DOM和做用最少的diff

你一个接一个地去修改30个节点的时候，就会引发30次（潜在的）布局重算，30次（潜在的）重绘，等等。

以后，一旦你要把这些改动传递给真实DOM，以前全部的改动就会整合成一次DOM操做。这一次DOM操做引发的布局计算和重绘可能会更大，可是相比而言，整合起来的改动只作一次，减小了（屡次）计算。

这就是所谓的Virtual DOM算法，包括几个步骤：

1.用javascript对象结构表示DOM树的结构，而后用这个树构建一个真正的DOM树，插入到文档流中

2.当文档变动时，从新构造一颗新的对象树，而后用新的对象树和旧的对象树对比，记录两棵树的差别

3.把2所记录的差别应用到1所构建的真正的DOM树上，就实现变动了

 

Virtual DOM本质上就是在JS和DOM之间作了一个缓存。能够类比CPU和硬盘，既然硬盘这么慢，咱们就在他们之间加一个缓存。既然JS这么慢，咱们就在JS和DOM之间加一个缓存。CPU只操做内存，最后把变动写入硬盘。JS只操做Virtual DOM，最后把变动写入DOM。

 

其思想的关键是：

1.相对于 DOM 对象，原生的JS对象处理起来更快更简单。

2.比较两棵DOM树的差别是 Virtual DOM算法最核心的部分，这也是所谓的Vritual DOM的diff算法。 

 

为何快不少？

固然若是真的这样大面积的操做 DOM，性能会是一个很大的问题，因此 React 实现了一个虚拟 DOM，组件 DOM 结构就是映射到这个虚拟 DOM 上，React 在这个虚拟 DOM 上实现了一个 diff 算法，当要更新组件的时候，会经过 diff 寻找到要变动的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，因此实际上不是真的渲染整个 DOM 树。这个虚拟 DOM 是一个纯粹的 JS 数据结构，因此性能会比原生 DOM 快不少