在写正文之前，让我先唠叨几句废话。上学的时候老师经常告诉我们要写好读书笔记，拥有好的读书习惯会让人受益终生，可惜本人不是一个特别听话的学生，书读的不多，更是没有什么笔记之类的东西。但是工作之后，特别是从事前端以来，我发现还是多少要记一些笔记，至少让自己在今后的开发中轻松绕过一些坑。
闲话不再多说了，上代码：
<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>
改变后的代码只做一次添加节点的操作，其效率可见一斑。
网友评论