编写js时减少DOM操作的详解

最新推荐文章于 2024-02-25 00:15:00 发布

IE退市我再改网名

最新推荐文章于 2024-02-25 00:15:00 发布

阅读量321

点赞数

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/weixin_42477164/article/details/105306320

版权

闲话不再多说了，上代码：

<body>
    <div id='container'></div>
</body>
<script src='jQuery-3.0.0.js'></script>
<script>
    var arr = ['QWERTY','ASDFGH','ZXCVBN'];
    for(var i=0 ; i<arr.length;i++){
        $('#container').append('<div>'+arr[i]+'</div>');
    }
</script>

这是一段js代码，为了减少代码量，这里引用了jQuery。从上面的代码可以看出来，代码每循环一次就将一个节点添加到DOM上，arr数组中有三个元素，以上添加节点的操作进行了三次。如果数组中有100个元素，有1000个元素，某些应用场景中一个数组可能会存上万甚至更多的元素，如果是这样，代码的执行效率就太低了。其实我们可以换个思路，代码如下：

<body>
    <div id='container'></div>
</body>
<script src='jQuery-3.0.0.js'></script>
<script>
    var arr = ['QWERTY','ASDFGH','ZXCVBN'];
    var str = '';
    for(var i=0 ; i<arr.length;i++){
        str+='<div>'+arr[i]+'</div>';
    }
    $('#container').append(str);
</script>

改变后的代码只做一次添加节点的操作，这样就减少了对MOD的操作