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

例子：我们要实现的效果是当用户点击鼠标的时候，就在旧数据上追加若干新数据。　　如果使用标准DOM的话，完整代码如下：复制代码代码如下: <html> <head> <title>test</title> </head> <body> <div> <p>data<p> </div> <script> 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); } }; </script> </body> </html> 注：一旦结构比较复杂的话，标准DOM需要编写冗长的代码。　　如果使用innerHTML的话，部分代码如下：复制代码代码如下: <script> document.onmousedown = function() { var html = ""; for (var i = 0; i < 10; i++) { html += "<p>" + Math.random() + "<p>"; } document.getElementsByTagName('div')[0].innerHTML += html; }; </script> 注：innerHTML没有标准DOM中的appendChild，所以使用了『+=』的方式，效率低下。　　我们可以结合使用innerHTML和标准DOM，这样二者的优点就兼得了，部分代码如下：复制代码代码如下: <script> document.onmousedown = function() { var html = ""; for (var i = 0; i < 10; i++) { html += "<p>" + Math.random() + "<p>"; } var temp = document.createElement("div"); temp.innerHTML = html; while (temp.firstChild) { document.getElementsByTagName('div')[0].appendChild(temp.firstChild); } }; </script> 注：创建一个元素，然后注入innerHTML，接着在元素上使用标准DOM操作。　　还不算完，Asynchronous innerHTML给出了更强悍的解决方法，部分代码如下：复制代码代码如下: <script> document.onmousedown = function() { var html = ""; for (var i = 0; i < 10; i++) { html += "<p>" + Math.random() + "<p>"; } 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); } })(); }; </script> 注：使用setTimeout防止堵塞浏览器，使用DocumentFragment减少渲染次数。　　另：代码在拼接字符串时还可以更快，详见：Fastest way to build an HTML string。

　　推荐阅读

　　仿jQuery的siblings效果的js代码

复制代码代码如下: function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a=[];//定义一个数组，用来存o的兄弟元素 var p=o.previousSibling; while(p){//先取o的哥哥们判断有没有上一个哥>>>详细阅读

本文标题：优化innerHTML操作(提高代码执行效率)

地址：http://www.17bianji.com/kaifa2/JS/24290.html

1/2 1