JavaScript编码陷阱之一不必要的DOM操作
浏览量:3338
在学习软件开发编程的过程中,我们这些初学者经常会遇到这样或那样的编程陷阱,在此列出关于javascript编程遇到的一些陷阱。
不必要的DOM操作
例如下面这段代码:
- for (var i = 0; i < 100; i++){
- var li = $("<li>").html("This is list item #" + (i+1));
- $("#someUL").append(li);
- }
这段代码对DOM进行了100次修改,并且创建了100个不必要的jQuery对象。正确的做法是使用一个文档片段,或者创建一个字符串,把100个<li>元素赋给该字符串。然后附加到HTML中。这样就只需运行DOM一次,代码如下:
- var liststring = "";
- for (var i = 100; i > 0; i--){
- liststring += "<li>This is list item #" + (99- i);
- }
- document.getElementById("someUL").innerHTML(liststring);
正如上面所描述的一样,下面再提供一个方式,使用数组:
- var liststring = "<li>"
- var lis = [];
- for (var i = 100; i > 0; i--){
- lis.push("This is list item #" + (99- i));
- }
- liststring += lis.join("</li><li>") + "</li>";
- document.getElementById("someUL").innerHTML(liststring);
这是在JavaScript创建重复HTML最快最简单的方法,无需使用模板库或框架。