createElement與innerHtml效能比較，createelement

createElement與innerHtml效能比較，createelement

        js中，動態添加html的方法大致就是兩種，一種是document.createElement等方法建立，然後使用Element.appendChild添加，或者是使用Element.innerHTML = sHTML的方式。兩種方法，顯然前面一種更加靈活，除了Element.appendChild方法外，還有insertBefore等等其他dom操作方式。這裡且不談靈活性，但就效能做一個探索。

       比較的方式很簡單：

       各產生10000次形如<div><span>效能測試</span> ......</div>的html,然後一次性放入body中，記錄此全過程，耗時時間，並運行10次，輸出耗時。

       代碼如下：

window.onload = function(){testPerformance(10,function(){document.body.appendChild(generateHtmlElement(10000));})testPerformance(10,function(){document.body.innerHTML = generateHtmlString(10000);})}function testPerformance(iTimes,fn){var iLastTime = null;var iTotalTime = 0;for(var i=1;i<=iTimes;++i){iLastTime = new Date().getTime();fn();var iCost = new Date().getTime() - iLastTime;console.log("第"+i+"次用時："+iCost+"毫秒");iTotalTime+=iCost;document.body.innerHTML = "";iLastTime = new Date().getTime();}console.log("總用時："+iTotalTime+"毫秒");console.log("平均用時："+iTotalTime/iTimes+"毫秒");}/* *使用document.createElement等dom方法產生元素<div><span>測試效能</span>....<div> *times:產生div的數量 *return Element */function generateHtmlElement(iTimes){var result = document.createElement("div");for(var i=0;i<iTimes;++i){var eDiv = document.createElement("div");for(var j = 0;j<10;++j){var eSpan = document.createElement("span");eSpan.appendChild(document.createTextNode("測試效能"));eDiv.appendChild(eSpan);}result.appendChild(eDiv);}return result;}/*    *使用字串拼接的方式產生<div><span>測試效能</span>....<div>字串   *times:產生div的數量    *return string    */function generateHtmlString(iTimes){var sb = new StringBuilder ();for(var i=0;i<iTimes;++i){sb.append("<div>");for(var j = 0;j<10;++j){sb.append("<span>效能測試</span>");}sb.append("</div>");}return sb.toString();}function StringBuilder () {     this.__asBuilder = [];}StringBuilder.prototype.clear = function(){     this.__asBuilder = [];//這種寫法要比this.__asBuilder.length = 0稍快,快多少，看數組的長度}StringBuilder.prototype.append = function(){     Array.prototype.push.apply(this.__asBuilder,arguments);//調用Array的push方法，這樣調用，使用append,可以傳遞多個參數     return this;//這樣可以實現append("a").append()的效果}StringBuilder.prototype.toString = function(){     return this.__asBuilder.join("");    }

拼接字串的過程中，使用了一個自訂類StringBuilder,以提升字串拼接效能。

測試結果如下：

chrome下，差不太多，innerHTML稍好一些：

Firefox中，innerHTML完爆createElement

IE11，應該說，IE11，被chrome和Firefox完爆了

總結一下，單就效能而言，innerHTML都要比createElement建立元素在append進dom中快一些，在IE下，就差的更遠了。話說，IE，你怎麼這麼慢？！我測試方式有問題嗎？！

innerHTML與createElment的不同

innerHTML是元素的一個屬性，通過修改它的值可以修改元素的內容，即修改了文檔。
createElement只是在記憶體中建立了一個元素，並沒有添加到文檔中。
createElement傳回值是所建立的元素對象，使用appendChild方法添加到文檔中，innerHTML所賦的值只能是字串。
其實這兩個關係不大，比較沒什麼意義。
 
documentcreateElement(tag)，其中tag是innerHTML的字串，在ie中可以正常顯示，在firefox中沒顯示

jQuery 對象封裝的 DOM 元素。
你可以傳遞一個手寫的 HTML 字串，或者由某些模板引擎或外掛程式建立的字串，也可以是通過 AJAX 載入過來的字串。但是在你建立 input 元素的時會有限制，可以參考第二個樣本。當然這個字串可以包含斜杠 (比如一個映像地址)，還有反斜線。當你建立單個元素時，請使用閉合標籤或 XHTML 格式。例如，建立一個 span ，可以用 $("<span/>") 或 $("") ，但不推薦 $("")。在jQuery 中，這個文法等同於$(document.createElement("span")) 。
參數
htmlString
用於動態建立DOM元素的HTML標記字串
ownerDocument (可選)Document
建立DOM元素所在的文檔
樣本 描述:
動態建立一個 div 元素（以及其中的所有內容），並將它追加到 body 元素中。在這個函數的內部，是通過臨時建立一個元素，並將這個元素的 innerHTML 屬性設定為給定的標記字串，來實現標記到 DOM 元素轉換的。所以，這個函數既有靈活性，也有局限性。
jQuery 代碼:$("
Hello
").appendTo("body"); 描述:
建立一個 <input> 元素必須同時設定 type 屬性。因為微軟規定 <input> 元素的 type 只能寫一次。
jQuery 代碼:// 在 IE 中無效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");
收藏