有百萬條記錄存在的頁面的性能改進

我需要一些建議如何提高應用程序的性能，我正在開發MVC 3 ASP.NET應用程序。從控制器中，我拉動了5萬條字符串類型的記錄，所有項目（即50,000個）都使用Jquery動態添加到HTML Div中。有百萬條記錄存在的頁面的性能改進

$(div).append("<input type='radio' name='reportType' 
    id='" + item.Item1 + "' value = '" + item.Item2 + "'/>" + item.Item1 ");

我看到有同時加入以上單選按鈕，家長控制，即HTML被認爲相當長的時間DIV

父HTML DIV有Check box，對檢查，所有的子盒必須選擇。我看到有相當多的時間來檢查所有項目

所有這些項目都是滾動瀏覽器，是否有改善用戶體驗，就像加載數據滾動的基礎上一樣的數據虛擬化的Silverlight在HTML中，某些事情的方式5.

我檢查所有項目並拖動到頁面的另一部分，使瀏覽器進入無響應模式。任何人都可以爲我提供最好的用戶體驗，並提高這些記錄的性能：查詢性能

來源

2013-05-08 user145610

不要將它們全部添加到html中，只添加要在同一時間顯示的內容。如果將所有50k添加到DOM，DOM將會變慢。 – 2013-05-08 19:04:36

您正在逐個循環瀏覽50K條記錄並逐一添加它們？重繪地獄！你真的需要一種方法來分頁數據或做某種無盡的滾動技術。 – epascarello 2013-05-08 19:09:17

試着把你正在做的事情做一個HTML保存，把它放在你的網絡服務器上，然後讓瀏覽器的性能變好。如果它仍然很慢，那麼你可能需要重新考慮你的屏幕複雜度。您可以嘗試使用'setTimeout'在時間塊中添加元素，以便與瀏覽器有效地進行多任務處理。屏幕會呈現明顯緩慢，但這比鎖定屏幕要好！ – halfer 2013-05-08 19:12:06

您應該創建一個documentFragment並在其中添加節點。完成後，將documentFragment添加到DOM。此外，使用createElement比使用字符串更有效。有很多jsperf測試可以證明這一點，並且您還可以找到以最有效的方式實現它的方法。

爲了防止瀏覽器長時間完全凍結，您應該分批...... 1000項（純猜測）來打破迭代。並根據需要多次調用該函數以完成工作。把它放在櫃檯外面。撥打電話setTimeout(renderMore, 0)。至少這樣可以防止窗戶凍結。

根據您的用戶界面和工作流程，可能會有一些其他改進可以應用。但是你沒有提供關於這方面的很多信息。

來源

2013-05-08 19:34:34 TheBrain

構建您想要附加的HTML字符串。
建築完成後追加一次。

這會比追加每個字符串更快。

var htmlToAppend = ""; 
for (var i in items) { 
    var item = items[i]; 
    htmlToAppend = "<input type='radio' name='reportType' id='" + item.Item1 + "' value = '" + item.Item2 + "'/>" + item.Item1; 
} 

$(div).append(htmlToAppend);

另外，我相信還有更好的辦法！

來源

2013-05-08 19:12:31

基本上，顯示大型數據集，試試這個：

1）在瀏覽器內存存儲，使用的sessionStorage（）或localStorage的（）

2）儘量減少DOM，不寫的所有數據到DOM ，動態添加&刪除元素。

3）允許數據集可搜索，這意味着一個過濾功能，修剪數據集。

解決此問題的另一種推薦方法是使用Megalist，要求使用jQuery並且適用於平板電腦或移動設備。

來源

2013-05-08 23:20:02

回答

相關問題