由ajax填充表格非常緩慢

我寫了一個web服務，它返回一些數據爲json。要顯示在一個表中我使用的數據表jquery插件：由ajax填充表格非常緩慢

for(var i=0;i<results.length;i++){ 
     myTable.fnAddData([ 
     "<input name='codeSearched' type='radio' value='"+results[i].ID+"' />", 
     "<span id='code_"+results[i].ID+"'>"+ results[i].code+"</>", 
     results[i].description ] ,true); 
}

此JavaScript似乎殺死瀏覽器。（只有幾千行，在Firefox上超過20秒）。我通過將服務器端呈現爲html片段並直接插入到dom中，將類似數量的數據加載到數據表表中之前數量級更快。

你能推薦一種獲得兩全其美的方法嗎？（即調用，在一個開放的結構化格式提供數據的AJAX的Web服務，同時也解析和顯示速度？

感謝您的任何建議

來源

2010-09-15 Chris

你一次顯示幾行行嗎？瘋狂。並使用javascript來創建一個dom結構，這將比僅僅提供html的服務器端應用程序慢得多。 – lincolnk 2010-09-15 15:10:13

不顯示，但是他們需要在dom中爲datatables分頁和搜索客戶端。 – Chris 2010-09-15 15:13:14

正如你所說，HTML片段要快得多（也更簡單），可能不值得頭疼...... – Chris 2010-09-15 15:13:49

你會希望得到一些定時信息，看看如何快速您的來電回來

我有兩種方法可以做到這一點，一種是使用螢火蟲查看需要多長時間，另外還可以在我的通話時間內進行計時，以便我可以看到從何時開始通話到何時我實際上完成了。

如果那是可以接受的，那麼建立這個表就是問題了。

你會想看看這篇文章，以確保你的技術不會在時間上殺死你，因爲在使用DOM函數和innerHTML之間存在着不同。

http://www.quirksmode.org/dom/innerhtml.html

下一個問題是，如果你試圖全力打造的表，你會發現瀏覽器將不顯示它，直到你完成，而這可能是一個殺手。

因此，我過去所做的就是將其拼成一個整體。因此，我建立了大約100行，然後使用setTimeout以便瀏覽器可以顯示該行，然後構建下一批，直到完成爲止。

這樣用戶可以快速看到表格的第一部分，並且它應該在他們需要建立整個表格之前完成（例如，如果他們需要查看底部行）。

一次構建的行數是用戶需求和性能之間的折衷。

來源

2010-09-15 14:54:53

是的，我有螢火蟲，阿賈克斯調用只需要約1秒。所以，你認爲唯一的方法是重寫JavaScript來呈現塊的表？ – Chris 2010-09-15 15:03:32

你會希望確保你打電話來建立表格不會引起你的問題，然後，作爲最後一步，我發現建立大塊是我唯一真正的選擇，以避免等待表的許多秒鐘。儘管如此，在獲得優化之前，請獲取數字，以便知道每個部分需要花費多少時間。 – 2010-09-15 15:16:41

爲什麼不嘗試將最後一個參數設置爲「false」？它的運行速度要快得多，但用戶需要等到表格填充完成。

如果速度足夠快，您可能希望使它更具交互性，也許您可以設置參數「false」，但每10或100條記錄設置「true」以允許重繪表格。

填寫數千個單選按鈕列表的原因超出了我的想法......它聽起來不像一個好的用戶界面練習，但您必須有自己的理由。

祝你好運！

Luis

來源

2010-09-15 15:13:07 luiscolorado

由ajax填充表格非常緩慢

回答

相關問題