在寫正文之前,讓我先嘮叨幾句廢話漱病。上學(xué)的時(shí)候老師經(jīng)常告訴我們要寫好讀書筆記,擁有好的讀書習(xí)慣會讓人受益終生,可惜本人不是一個(gè)特別聽話的學(xué)生杨帽,書讀的不多漓穿,更是沒有什么筆記之類的東西。但是工作之后注盈,特別是從事前端以來晃危,我發(fā)現(xiàn)還是多少要記一些筆記,至少讓自己在今后的開發(fā)中輕松繞過一些坑老客。
閑話不再多說了僚饭,上代碼:
<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鳍鸵。從上面的代碼可以看出來,代碼每循環(huán)一次就將一個(gè)節(jié)點(diǎn)添加到DOM上朴则,arr數(shù)組中有三個(gè)元素权纤,以上添加節(jié)點(diǎn)的操作進(jìn)行了三次。如果數(shù)組中有100個(gè)元素乌妒,有1000個(gè)元素汹想,某些應(yīng)用場景中一個(gè)數(shù)組可能會存上萬甚至更多的元素,如果是這樣撤蚊,代碼的執(zhí)行效率就太低了古掏。其實(shí)我們可以換個(gè)思路,代碼如下:
<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>
改變后的代碼只做一次添加節(jié)點(diǎn)的操作侦啸,其效率可見一斑槽唾。