Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫(kù)。

 

實(shí)現(xiàn)

本文列出了優(yōu)化和提高Grid性能的實(shí)現(xiàn)和方法。

• 啟用分頁(yè)

• 啟用虛擬化

• 減少數(shù)據(jù)量

• 使用快速瀏覽器

 

 

啟用分頁(yè)

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

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

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

• Grid將顯示有限數(shù)量的記錄，如果記錄數(shù)量增加，則有可能超過(guò)maxJsonLength，您可能需要增加該限制。

• 數(shù)據(jù)將基于用戶，并且不會(huì)期望其他用戶更新相同的記錄。

• 您希望避免對(duì)每個(gè)數(shù)據(jù)操作使用單獨(dú)的AJAX請(qǐng)求。

• 您需要訪問(wèn)客戶端上的所有dataItem來(lái)進(jìn)行自定義數(shù)據(jù)操作，要檢索整個(gè)數(shù)據(jù)集，請(qǐng)使用dataSource的data方法。

• 在以下情況下使用服務(wù)器端操作：

• 您擁有大量記錄（多達(dá)數(shù)百萬(wàn)條）。

• 數(shù)據(jù)可以由其他用戶更改，并且在每次數(shù)據(jù)操作之后都需要更新數(shù)據(jù)。

• 您需要使用LINQ在服務(wù)器端執(zhí)行復(fù)雜的表達(dá)式，或者當(dāng)處理從數(shù)據(jù)庫(kù)中檢索數(shù)據(jù)的查詢比客戶端dataSource邏輯要快得多時(shí)。

 

啟用虛擬化

虛擬滾動(dòng)是分頁(yè)的一種替代方法，可以在以前呈現(xiàn)的記錄上呈現(xiàn)記錄。該方法減少了DOM元素，但使用戶能夠平滑滾動(dòng)數(shù)據(jù)。 您可以將本地綁定或遠(yuǎn)程綁定（用于大量數(shù)據(jù)）用于虛擬滾動(dòng)，當(dāng)用戶向下滾動(dòng)記錄時(shí)，將啟動(dòng)用于檢索下一個(gè)視圖的新請(qǐng)求。

 

減少數(shù)據(jù)量

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

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

 

使用快速瀏覽器

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