完整的jQuery UI組件庫Kendo UI for jQuery數據管理使用教程：Grid性能的最佳實現

---

Kendo UI for jQuery R2 2020 SP1試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

最佳實現

本文列出了優化和提高Grid性能的最佳實現和方法。

• 啟用分頁
• 啟用虛擬化
• 減少數據量
• 使用快速瀏覽器

啟用分頁

 從理論上講，如果啟用了分頁，則將解決所有性能問題。 將每頁的記錄數限制為合理的數量，使您可以實現所有網格功能，而不會影響其性能。 例如，即使每頁顯示20條記錄、每頁顯示50條記錄，結果會導致1,000個單元格被瀏覽器快速處理。對于更復雜的情況，例如您需要直接在列模板中而不是在編輯器模板中呈現編輯器，則可以進一步減小pageSize －如果在每個單元格中初始化一個小部件，最終將有1,000個小部件，將是一個重大打擊。

 啟用分頁功能后，必須決定是在客戶端還是在服務器上處理數據操作。此方法適用于所有數據操作，例如過濾、分組和排序。

在以下情況下使用客戶端操作：

• Grid將顯示有限數量的記錄，如果記錄數量增加，則有可能超過maxJsonLength，您可能需要增加該限制。
• 數據將基于用戶，并且不會期望其他用戶更新相同的記錄。
• 您希望避免對每個數據操作使用單獨的AJAX請求。
• 您需要訪問客戶端上的所有dataItem來進行自定義數據操作，要檢索整個數據集，請使用dataSource的data方法。

在以下情況下使用服務器端操作：

• 您擁有大量記錄（多達數百萬條）。
• 數據可以由其他用戶更改，并且在每次數據操作之后都需要更新數據。
• 您需要使用LINQ在服務器端執行復雜的表達式，或者當處理從數據庫中檢索數據的查詢比客戶端dataSource邏輯要快得多時。

啟用虛擬化

 虛擬滾動是分頁的一種替代方法，可以在以前呈現的記錄上呈現記錄。 該方法減少了DOM元素，但使用戶能夠平滑滾動數據。 您可以將本地綁定或遠程綁定（用于大量數據）用于虛擬滾動，當用戶向下滾動記錄時，將啟動用于檢索下一個視圖的新請求。

減少數據量

 通過使用外部或初始過濾器減少數據量與Grid不直接相關，而是處理大量數據的通用方法。 概念是實施其他篩選條件，以減少綁定到網格的記錄。 一些項目允許使用外部過濾器小部件，例如DropDownList，并且它們的選定值用于在將數據傳遞到Grid之前對其進行過濾。 例如，如果您有來自不同公司的數百萬個訂單，則可以使用所有公司的外部DropDownList列表，然后在dataSource的讀取數據操作中將當前選擇的一個應用為附加參數。 這樣，您可以應用初始過濾器，僅返回該公司的訂單。

 為了減少數據量，您還可以為Grid的dataSource中的特定字段設置初始過濾條件。 但是，如果啟用了過濾并且綁定到該字段的列是可見的，則用戶將能夠刪除它。

使用快速瀏覽器

 Internet Explorer會慢慢處理頁面上使用太多DOM元素和事件偵聽器的窗口小部件。 在Kendo UI小部件的上下文中，使用Chrome可提供最佳的用戶體驗。

---