I Know JS DOM篇

DOM

web components

web components是一套标准，有3个部分（以前是4个，弃用了一个）：

1. custom elements 允许开发者定义自己的html元素，通过customElements.define()可以创建新的元素，并赋予自定义行为
2. shadow dom 也是一组js api，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，你可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
3.  <template> 和 <slot> 元素使你可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
   ==使用场景==
   web components独立于js，可用于跨框架共享组件、封装复杂的UI组件并隔离其内部结构和样式、第三方插件库开发等等
   【more】Vue 3 提供了内置的工具 @vue/web-component-wrapper，可以将 Vue 组件打包为 Web Components，从而允许在任何项目中使用 Vue 组件。

DocumentFragment对象

**DocumentFragment**，文档片段接口，表示一个没有父对象的最小文档对象。
它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不对性能产生影响。

批量缓存dom操作
在一些前端框架的底层，就广泛用到了documentFragment来提高性能
react中的幽灵标签<></>的原理和documentFragment类似，但不是同一个东西，它能够实现在react组件中包裹多个元素，突破组件只能包含一个根元素的限制
documentFragment的具体的使用场景：需要批量操作dom时，可以将documentFragment作为缓冲层，临时存储节点（包括插入和删除节点等），再一次插入dom中，可减少重绘和重排，提高页面性能

const fragment = document.createDocumentFragment();
const el = document.createElement('li');
for(let i=0;i<100;i++) {
  fragment.appendChild(el);
}
document.body.appendChild(fragment)
// 删除同理，删除节点完成后再插回到dom中