大量插入 dom 元素的方法，如何优化 DOM 操作的性能？

一般我们会想到使用循环，但是，由于渲染回流，在 for 循环内部多次 appendChild 会造成多次渲染，从而出现卡、闪屏的现象

向<ul id="root"></ul>插入 1000 条<li>我是 li 标签</li>标签

解决办法：

创建文档片段 Fragment，将标签全部放入该片段中，再统一插入 document，这样只会渲染一次

<ul id="root"></ul>

<script>
  const root = document.getElementById('root')

  const fragment = document.createDocumentFragment()

  for (let i = 0; i < 1000; i++) {
    let li = document.createElement('li')
    li.innerHTML = '我是li标签'
    fragment.appendChild('li')
  }

  root.appendChild(fragment)
</script>

参考文章：https://blog.csdn.net/Tracy_frog/article/details/82903620