DOM、虚拟 DOM 和 DOM diff

DOM全称Document Object Model，是将网页转化为对象的接口规范，允许开发者对网页进行操作。DOM并不是JS语法的一部分，但JS是最常用的DOM操作语言。DOM的运作建立在节点概念上，文档被抽象为树形结构，节点有七种类型。浏览器解析HTML生成DOM树。为了容纳多个节点，DOM提供两种节点集合：NodeList和HTMLCollection。

HTMLCollection与NodeList的区别在于，两者都类同数组，但NodeList具有forEach方法，而HTMLCollection则没有。

在Vue、React等框架出现之前，修改页面内容需通过查找DOM树并直接修改来实现。这种做法效率低下，因为浏览器会进行大量重绘和回流，导致操作真实DOM整体效率低。虚拟DOM是Vue、React等框架中引入的概念，它是一个普通JavaScript对象，包含tag、props、children属性，用于模拟真实DOM。虚拟DOM每次更新时只更新改变的部分，提高效率，减少资源消耗。

使用虚拟DOM可实现数据视图分离，前端开发不再关注DOM变化。虚拟DOM的优点包括减少DOM操作，跨平台能力以及数据驱动视图的实现。缺点则在于可能会带来额外的计算和内存消耗。

DOM diff算法比较前后两次DOM树的差异，只更新有变化的DOM节点。它通过一个diff函数实现，计算效率较高。然而在同级节点中对比时，可能存在问题，如误判节点变化。为解决此问题，可在节点中添加唯一标识key属性，避免误判。key的作用在于帮助算法快速判断虚拟DOM修改，提升页面渲染效率。

key不能使用数组的index作为标识，因为数组变更时插入或删除后，index无法保证始终指向对应的元素，可能导致判断错误。

您可能感兴趣问答

Collapsible

热门标签

热点问答