JavaScript性能优化 - 文档碎片优化节点添加

ImLeo2020

2021-02-11 205 阅读1分钟

针对于 web 应用开发来说，DOM 节点的操作是非常频繁的。而针对 DOM 的交互操作，是非常消耗性能的，特别是创建一个新的节点添加至界面中时。这个过程一般都会伴随着回流和重绘的一个出现，这两个操作对于性能的消耗又是比较大的。

<html>
<body>
  <button id="btn"> Add </btton>
  <script>
    for (var i = 0; i < 10; i++) {
        var oP = document.createElement('p')
        oP.innerHTML = i
        document.body.appendChild(oP)
    }
    // 文档碎片化方式
    const fragEle = document.createDocumentFragment()
    for (var i = 0; i < 10; i++) {
        var oP = document.createElement('p');
        oP.innerHTML = i
        fragEle.appendChild(oP)    }
    document.body.appendChild(fragEle)
  </script>
</body>
</html>