DOM元素創建與.innerHTML與Direct

Question

在生成動態內容時，哪種方式更好地簡單地創建HTML並將其插入.innerHTML或直接在DOM中創建元素？

我不關心復雜性或其他。 只需在客戶端處理時間。

哪個更快？

如果我必須按效率（低處理時間）的順序猜測，這將是：

1. DOM創作
2. .innerHTML屬性插入
3. 直接寫作

這與實施的復雜性成反比：

1. 直接寫作
2. .innerHTML屬性插入
3. DOM創作

這是一個有效的問題嗎？ 有人可以驗證這是在考慮復雜性和速度時確定如何更新客戶端（即javascript）的權衡嗎？

研究：

我不關心他們在這里的安全性 - > InnerHTML與DOM - 安全性

InnerHTML與DOM這不是重復，因為它只涵蓋了我的部分問題。

Answer 1

DOM插入比更新innerHTML更快是不正確的，例如，請參閱http://segdeha.com/experiments/innerhtml/和http://www.quirksmode.org/dom/innerhtml.html上的基准測試。 實現innerHTML解決方案可能會更快，只需注意它在使用XHTML時不可用。

Answer 2

從我自己的個人測試來看，他們都能滿足大多數需求。 但是，如果您正在做一些瘋狂的事情，比如為頁面創建數千個元素，最快的方法就是使用文檔片段。 John Resig寫了一篇關於它的好博文。 http://ejohn.org/blog/dom-documentfragments/

Answer 3

根據我的經驗，它們的性能基本相當。 但是，如果使用DOM方法，則可以更好地訪問閉包的功能，因此您可以直接將數據和函數綁定到各個DOM元素。

對於性能，無論采用何種方法，主要的是隱藏或刪除要修改的DOM部分，在DOM之外進行所有更改，然后將其作為單個操作放回DOM中以避免不必要的回流（重繪）在瀏覽器中。

Answer 4

很多 jsPerf基准都 涵蓋了這個主題 ; 嘗試在網上搜索“jsperf innerhtml domelement”或其他有意義的搜索組合。