我的回答

1. 使用fragment来创建
2. 使用shadowDOM
3. 使用VNode

参考回答

缓存 DOM 对象

比如在循环之前就将节点获取并缓存到内存中，在循环内部直接引用，而不是重新查询

文档碎片

• document.createDocumentFragment()创建的文档碎片是个虚拟节点对象，对它的操作不会影响真实 dom，对它进行频繁操作，操作完成在一次性添加到真实的 dom 中;
• 把需要复杂操作的元素，先从页面移除再进行操作，操作完成再添加回来;
• 把需要复杂操作的元素复制一个副本 cloneNode(),在内存中进行操作再替换旧的;

  使用 innerHtml 代替高频的 appendChild

  RAF

  把可能导致重绘的操作放到 RAF(requestAnimationFrame)中，浏览器空闲的时候去处理

  虚拟 DOM

  Virtual DOM 本质是一个 JS 对象，DOM diff 之后最后在批量更新真实的 DOM 结构