「这是我参与11月更文挑战的第 26 天，活动详情查看：2021最后一次更文挑战」
Comment 类型
在 DOM 中的注释，可以通过 Comment 类型表示，其具备一下特点：
- nodeType = 8
- nodeName = '#comment'
- nodeValue = '注释的内容'
- parentNode 为 Document 或 Element
- 不会有子节点
Comment 类型和 Text 类型继承自同一个基类（CharacterData）。因此，除了 splitText() 之外，Text 类型其余的字符串操作方法，Comment 类型均有提供 （想了解 Text 类型的字符操作方法，可以阅读这一篇文章 和我一起深入了解文档对象模型（DOM）「Text 类型文本节点常规操作」）
通过 document.createComment 创建一个注释节点，然后挂载到 span 的下面
现在，span 下存在 text, comment 共计 2 个子节点。注释的内容，可以通过 nodeValue 或 data 属性获取
在日常的 js 操作中，很少会去访问注释节点。此外浏览器不会解析在 </html> 之后的注释节点。因此，有效的 comment 节点需要是 HTML 元素的后代
DocumentFragment 类型
在所有的节点类型中，DocumentFragment 类型是唯一一个在标记中没有对应表示的类型
DOM 将这种类型定义为“轻量级”文档“，可以包含和操作节点，但不会有 DOM 那样额外的消耗
DocumentFragment 节点具有以下特征：
- nodeType = 11
- nodeName = '#document-fragment'
- nodeValue = null
- parentNode = null
- 子节点类型可以是 Elem、Text、Comment 等类型
换一个描述，当我们需要大批量的操作文档节点时，我们可以定义一个临时的节点，所有的操作均在这个节点上实现后，再吧这个节点上的子节点，全部更新到 DOM 上，这个就是 VUE 上的虚拟节点的理念
我们先在定义好的 fragment 实例上添加两个子节点
然后将 fragment 作为子节点插入到 span 标签内，可以看到，上一步插入在 fragment 节点上的 2 个子节点，直接一次性插入到 span 上
当我们直接在 DOM 上进行节点的变更时，DOM 会重新渲染。如果在更新的操作较多的情况下，会严重的影响体验（DOM 渲染不过来，卡顿）；这个时候借助 DocumentFragment，我们在一个虚拟的节点上完成更新操作，再将这个节点上的内容直接替换到 DOM 中，DOM 只需要重新渲染一次，这里就实现了性能的飞跃！