JavaScript編碼陷阱之一不必要的DOM操作
瀏覽量:3438
在學習軟件開發編程的過程中,我們這些初學者經常會遇到這樣或那樣的編程陷阱,在此列出關于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最快最簡單的方法,無需使用模板庫或框架。