在网上查阅了不少关于innerHTML的性能比较，一直只是间接的得到结果，今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较，当然，这其中的有许多考虑不周的地方，纯粹是为了比较运行时间，并没有考虑内存等资源的消耗，算不上真正的性能比较！下次有时间，进行个完整的性能测试，包括CPU,内存等资源消耗...
废话不多说了，代码里面有动态添加HTML的方法的简单说明，少了几种比较复杂的方法，例如：利用cloneNode（），理论上比直接create性能能提高30%左右，当然不同的浏览器实际测试时间很大不同。下面看看详细的测试代码！
<html> <head> <title></title> </head> <body> <div id="div1"></div> <script> /*-------------------------------- 第一大类 ------------------------------------*/ //方法一、innerHTML循环操作：取值赋值 (6200ms) function comparePerformance1(){ var startDate = new Date(), doc = window.document; for(var i=0; i < 500; ++i){ var str = "<div id='div'" + i + " style='100px;height:30px;background-color:#eee;'>test" + i + "</div>"; doc.body.innerHTML += str; } alert("Run times: " + (new Date() - startDate) + "ms"); } //方法二、改良方法一，将字符串赋值给变量，避免innerHTML循环操作：取值赋值 (18ms) function comparePerformance2(){ var startDate = new Date(), doc = window.document, temp; for(var i=0; i < 500; ++i){ var str = "<div id='div'" + i + " style='100px;height:30px;background-color:#eee;'>test" + i + "</div>"; temp += str; } doc.body.innerHTML = temp; alert("Run times: " + (new Date() - startDate) + "ms"); } //方法三、改良方法一，将字符串循环放入数组，然后将数组的所有字符串Join()拼接，同样避免DOM（innerHTML）循环操作：取值赋值 (20s) function comparePerformance3(){ var startDate = new Date(), doc = window.document, array = []; for(var i=0; i < 500; ++i){ //push()和赋值性能相当 array.push("<div id='div'" + i + " style='100px;height:30px;background-color:#eee;'>test" + i + "</div>"); } doc.body.innerHTML = array.join(''); alert(); } /*--------------------------------------- 第二大类 -------------------------------------*/ //多次DOM操作创建节点，然后指定它们之间关系 （122ms) function comparePerformance4(){ var startDate = new Date(), doc = window.document; for(var i=0; i < 500; ++i){ var div = doc.createElement("div"); var text = doc.createTextNode("text" + 1); div.appendChild(text); doc.body.appendChild(div); div.style.id = "div" + i; div.style.width = "100px"; div.style.height = "30px"; div.style.backgroundColor = "#eee"; } alert("Run times: " + (new Date() - startDate) + "ms"); } //createDocumentFragment (31ms) function comparePerformance5(){ var startDate = new Date(), doc = window.document, fragment = document.createDocumentFragment(); for(var i=0; i < 500; ++i){ var div = doc.createElement("div"); var text = doc.createTextNode("text" + i); div.appendChild(text); fragment.appendChild(div); div.style.id = "div" + i; div.style.width = "100px"; div.style.height = "30px"; div.style.backgroundColor = "#eee"; } doc.body.appendChild(fragment); alert("Run times: " + (new Date() - startDate) + "ms"); } //使用模板元素clone (28ms) function comparePerformance(){ var startDate = new Date(), doc = window.document, fragment = document.createDocumentFragment(), copyDiv = document.getElementById("div1"); for(var i=0; i < 500; ++i){ var div = copyDiv.cloneNode(false); var text = doc.createTextNode("text" + i); div.appendChild(text); div.style.id = "div" + i; div.style.width = "100px"; div.style.height = "30px"; div.style.backgroundColor = "#eee"; fragment.appendChild(div); } doc.body.appendChild(fragment); alert("Run times: " + (new Date() - startDate) + "ms"); } //usage test comparePerformance(); </script> </body> </html>