介绍一下虚拟dom和真实dom吧
一、DOM
DOM是文档对象模型(Document Object Model),它是一个结构化文本的抽象。
二、虚拟DOM
虚拟DOM只是js模拟的DOM结构,是对真实DOM的一个抽象,虚拟DOM是由js实现的避免DOM树频繁更新,通过js对象模拟DOM中的节点,然后通过特定的render方法将它渲染成真实的节点,数据更新时,渲染得到新的虚拟DOM,然后与上一次得到的虚拟DOM进行比较(diff算法),得到需要变更的DOM,更新在真实的DOM上,实现UI的同步更新。
三、真实DOM和虚拟DOM的区别
- 虚拟dom不会进行排版与重绘操作,虚拟dom是把js代码转为真实dom
- 真实dom频繁回流与重绘效率非常低
- 虚拟dom可以跨平台操作而真实dom是与浏览器绑定的
- 虚拟dom进行频繁修改,之后一次性比较在修改真实dom中需要修改的部分,最后真实dom进行排版重绘,从而减少dom节点的排版与重绘的损耗
四、性能优化——文档碎片
提到虚拟DOM顺便来讲一下页面性能优化的方式之一文档碎片吧!
一般情况下,在操作DOM结构的时候,经常会说非常消耗性能,原因是我们向DOM中添加新的元素,DOM会立刻更新。也就是添加一次更新一次,如果添加100个节点,那么就得更新100次,很浪费资源,每次操作DOM节点插入时,浏览器会触发重排重绘,为了提高效率,要尽可能的减少重排重绘,即应该减少DOM节点的插入。有一种方法就是利用文档碎片去做。
文档碎片是一种虚拟的DOM节点,存在于内存中,跟实际的DOM节点之间没有关系,当我们需要给一个节点中插入多个子节点的时候,完全可以将多个子节点先插入到文档碎片中,所有子节点都放到文档碎片中后,再将文档碎片插入到实际的节点中,这样就减少了很多节点直接插入到父节点中的次数了,也就是本来多次触发重排重绘的操作,有了文档碎片中,只需要触发一次重排重绘了。
文档碎片创建:
document.createDocumentFragment()
例:
for(var i=1;i<=5;i++){
var p = document.createElement('p')
p.innerText = i
list.appendChild(p)
}
通过循环创建了5个p标签,每创建一个就将这个p标签。创建插入的节点较少时,页面会立马发生变化。但一旦创建插入的节点多了以后,这个过程就可能会十分缓慢,例如插入10000条。
当然也可以提前先创建一个空节点,将所有子节点插入到这个节点中,然后再将这个节点插入到目标节点中。
var oDiv = document.createElement('div');
for(var i=1;i<=10000;i++){
var p = document.createElement('p');
p.innerText = i;
oDiv.appendChild(p);
}
list.appendChild(oDiv);
但这样会在list中多嵌套一个div标签。
而文档碎片的意义跟这个div一样,但不会多嵌套标签。
var oFragmeng = document.createDocumentFragment();
for(var i=1;i<=10000;i++){
var p = document.createElement('p');
p.innerText = i;
oFragmeng.appendChild(p);
}
list.appendChild(oFragmeng);
经过测试,在各个浏览器下性能明显得到提高。