JavaScript性能优化 - 克隆优化节点操作

75 阅读1分钟

针对于当前节点的操作,比如新增一个节点并且新增完成以后,后续可能还有很多属性以及相应方法的添加。这里还是以节点的新增配合克隆来完成优化的操作行为,

<html>
<body>
  <p id="box1">old</p>
  <script>
    for (var i = 0; i < 10; i++) {
        var oP = document.createElement('p')
        oP.innerHTML = i
        document.body.appendChild(oP)
    }
    // 克隆 + 文档碎片化方式
    const oldP = document.getElementById('box1')
    const fragEle = document.createDocumentFragment()
    for (var i = 0; i < 10; i++) {
        var newP = oldP.cloneNode(flase);
        newP.innerHTML = i        fragEle.appendChild(newP)    }
    document.body.appendChild(fragEle)
  </script>
</body>
</html>