什麼比innerHTML更快？

我正在做一個Ajax的工作，其中Web服務將返回數據，並在客戶端和我創建數據的HTML表。我使用var（保存生成的html代碼的字符串），做字符串連接以生成表，tr和td標籤並將數據放入其中。然後我使用innerHTML將這個帶有數據的html表格放入div中。請注意我在這個動態html代碼中應用內聯css。什麼比innerHTML更快？

我面臨的問題是Web服務將返回大量的數據。我測試的甚至是在本地機器上花費大約10-12分鐘來處理（連接，創建將數據放入表格，應用css）10000行。存儲過程只需要3-4秒就可以返回數據。請指導我如何減少瀏覽器內處理時間？我以某種錯誤的方式加快速度？或者是有一些技術或它的某些方法比innerHTML和字符串連接更快？

感謝

來源

2010-09-17 haansi

您可以走DOM並逐個添加節點。我不知道它是否會更快，但至少對最終用戶來說，它看起來像是電腦響應。 10-12分鐘沒有任何事情發生太多 – NullUserException 2010-09-17 04:30:27

Webservice數據一次返回嗎？或某種形式的接聽電話？如果您使用某種形式的網絡跟蹤，則Web服務器調用返回（從開始到結束）需要多長時間... – davidsleeps 2010-09-17 04:33:01

大衛數據一氣呵成。我已經在本地機器上測試過，所以不需要太多時間。在遠程主機上需要更多時間 – haansi 2010-09-17 04:59:19

我測試了什麼是即使在本地機器上花了大約10-12分鐘來處理（串聯，創建標籤把數據表，應用CSS）10000行

這是在瀏覽器中顯示的大量數據。特別是一旦你讓它遙遠。

爲什麼你首先想要在瀏覽器上顯示如此多的數據，我認爲在整個想法中有一些東西。

我建議您描述更多的情景，但是一旦您使用正常數量的數據顯示在瀏覽器頁面上，這可能會變成非問題。

來源

2010-09-17 06:52:05 eglasius

這往往是快了很多，首先創建一個元素，然後之後追加到DOM。試試這個：

if (document.createTextNode) { 
    // Create the element 
    var txtNode = document.createTextNode("Hello. This is a new node."); 
    // Append it to another object 
    document.getElementById("mydiv").appendChild(txtNode); 
}

來源

2010-09-17 04:36:04 Johnus

innerHTML被認爲比DOM操作更快（我從來沒有測試過它自己，但這是我在幾個地方看到的）。另外，將字符串推入數組中，然後連接在IE上要比連接快得多。

來源

2010-09-17 06:58:25 Tgr

什麼比innerHTML更快？

回答

相關問題