Kendo Grid（HTML5）的性能問題

場景：我正在使用Kendo網格（HTML5）。要填充網格客戶端，首先會調用服務器來獲取數據，一旦它接收到數據，它會在客戶端上執行一些處理，然後填充網格。Kendo Grid（HTML5）的性能問題

我面臨嚴重的電網性能問題。網格只有大約3000條記錄。但只要它將數據填充到網格中，瀏覽器內存就會增加超過400 MB。我想知道爲什麼內存消耗增加這麼多？網格只有5列。我有以下問題。

我怎樣才能找出它在哪裏消耗內存？我試圖在建立的分析工具中使用谷歌瀏覽器，但我找不到任何簡單的方法，可以清楚地顯示誰在使用內存。有沒有更好的工具來找出這個問題？我正在尋找一個像Red Gate profile .Net profiler這樣的工具。
我想知道爲什麼需要這麼多時間來渲染數據。是否有任何工具可以告訴我哪個功能/線路耗時？

阿圖爾Sureka

2015-10-26 Atul Sureka

您是否需要同時在屏幕上顯示所有3000條記錄？如果沒有，您是使用客戶端和服務器的虛擬化或分頁設置來查看。在峯值出現之前，經歷過這個問題將純粹降低到作爲數據加載的一部分生成的元素「行/列」的數量，例如3000 * 5 = 15000列，然後當您添加所有的span標籤和任何客戶端模板按鈕等，你可能會看20K元素試圖呈現。如果您能夠提供小提琴或道場，可以幫助您提高性能。 –

加載3000條記錄的問題。根據我的經驗，一次不能加載超過1000條記錄，但里程數會有所不同，因爲影響網絡性能和渲染速度的因素很多。

要解決您的問題，您應該在客戶端和服務器上配置分頁。這是一個常見問題和常見解決方案。在您的Kendo UI數據源對象上，只需設置serverPaging: true以及每頁的項目數pageSize: 1000。

var ds = new kendo.data.DataSource({ 
    // other implementation details left out for brevity 
    serverPaging: true, 
    pageSize: 1000 
});

一旦你這樣做，數據源會發送更多的參數，在服務器上的請求。您必須準備好處理這些參數。它將發送top（指響應中要發回的記錄數）和skip，它指示要從數據集的開頭跳過的記錄數。例如，如果您希望每頁1000條記錄的3000條記錄數據集的第3頁，則網格將發送skip: 2000, top: 1000。

我不知道你的實現服務器端是什麼，但它是微不足道的。請注意，您必須必須從包含在具有兩個密鑰的對象中的服務器返回您的數據，即data和total。這在Kendo UI中是慣例。數據顯然是記錄數組，總數是數組中的記錄數。如果需要，您可以在數據源的schema內更改這些默認值。

此外，在客戶端上，您需要告訴網格以期望分頁。您可以通過修改底層參數來自定義分頁的外觀。

var grid = $('#grid').kendoGrid({ 
    // other implementation details left out for brevity 
    datasource: ds, 
    pageable: { 
    numeric: false, 
    refresh: true 
    } 
});

來源

2015-10-26 14:25:24 Brett

Kendo Grid（HTML5）的性能問題

回答

相關問題