优化innerHTML操作(提高代码执行效率)_javascript技巧

data

document.onmousedown = function() {
for (var i = 0; i < 10; i++) {
var p = document.createElement("p");
p.appendChild(document.createTextNode(Math.random()));
document.getElementsByTagName('div')[0].appendChild(p);
}
};




注：一旦结构比较复杂的话，标准DOM需要编写冗长的代码。
　　如果使用innerHTML的话，部分代码如下：
代码如下:

document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "

" + Math.random() + "

";
}
document.getElementsByTagName('div')[0].innerHTML += html;
};


注：innerHTML没有标准DOM中的appendChild，所以使用了『+=』的方式，效率低下。
　　我们可以结合使用innerHTML和标准DOM，这样二者的优点就兼得了，部分代码如下：
代码如下:

document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "

" + Math.random() + "

";
}
var temp = document.createElement("div");
temp.innerHTML = html;
while (temp.firstChild) {
document.getElementsByTagName('div')[0].appendChild(temp.firstChild);
}
};


注：创建一个元素，然后注入innerHTML，接着在元素上使用标准DOM操作。
　　还不算完，Asynchronous innerHTML给出了更强悍的解决方法，部分代码如下：
代码如下:

document.onmousedown = function() {
var html = "";
for (var i = 0; i < 10; i++) {
html += "

" + Math.random() + "

";
}
var temp = document.createElement('div');
temp.innerHTML = html;
var frag = document.createDocumentFragment();
(function() {
if (temp.firstChild) {
frag.appendChild(temp.firstChild);
setTimeout(arguments.callee, 0);
} else {
document.getElementsByTagName('div')[0].appendChild(frag);
}
})();
};


注：使用setTimeout防止堵塞浏览器，使用DocumentFragment减少渲染次数。
　　另：代码在拼接字符串时还可以更快，详见：Fastest way to build an HTML string。