优化innerHTML操作(提高代码执行效率)_javascript技巧-tutorial js-php.cn

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

WBOY

Lepaskan： 2016-05-16 18:03:23

asal

1363 orang telah melayarinya

例子：我们要实现的效果是当用户点击鼠标的时候，就在旧数据上追加若干新数据。
　　如果使用标准DOM的话，完整代码如下：

复制代码代码如下:

test

data

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

复制代码代码如下:

 
<script> <BR>document.onmousedown = function() { <BR>var html = ""; <BR>for (var i = 0; i < 10; i++) { <BR>html += "<p>" + Math.random() + "<p>"; <BR>} <BR>document.getElementsByTagName('div')[0].innerHTML += html; <BR>}; <BR></script> 

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

复制代码代码如下:

 
<script> <BR>document.onmousedown = function() { <BR>var html = ""; <BR>for (var i = 0; i < 10; i++) { <BR>html += "<p>" + Math.random() + "<p>"; <BR>} <BR>var temp = document.createElement("div"); <BR>temp.innerHTML = html; <BR>while (temp.firstChild) { <BR>document.getElementsByTagName('div')[0].appendChild(temp.firstChild); <BR>} <BR>}; <BR></script> 

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

复制代码代码如下:

 
<script> <BR>document.onmousedown = function() { <BR>var html = ""; <BR>for (var i = 0; i < 10; i++) { <BR>html += "<p>" + Math.random() + "<p>"; <BR>} <BR>var temp = document.createElement('div'); <BR>temp.innerHTML = html; <BR>var frag = document.createDocumentFragment(); <BR>(function() { <BR>if (temp.firstChild) { <BR>frag.appendChild(temp.firstChild); <BR>setTimeout(arguments.callee, 0); <BR>} else { <BR>document.getElementsByTagName('div')[0].appendChild(frag); <BR>} <BR>})(); <BR>}; <BR></script> 

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