改進RadGrid客戶端性能

Question

我有一個呈現以編程方式創建的RadGrid的aspx頁面。大約有15列，只有1000多行。從加載到結束大約需要6-7秒，其中只有3秒是服務器端處理。我絕對可以優化這一點。但是在客戶端收到服務器的響應後，剩下的4秒似乎就發生了。

• 按下按鈕後，網格僅在6-7秒後加載。
• 但是Fiddler顯示的總時間爲2.2秒。
• 我有一個GIF在AjaxLoadingPanel中顯示「正在加載...」，並在最後4秒內掛起（不動畫）。

我看了一下Chrome的時間表，這是我所看到的：

• 我在約2秒（發送請求）發送的頁面請求。我開始看到一個GIF加載動畫。
• 大約4.2秒後，GIF動畫停止。在接下來的3-4秒內，即在時間軸上看到「XHR就緒狀態更改」。
• 在8.5秒左右，GIF動畫就會消失，我的頁面將被完全加載。
• 提琴手告訴我，頁面加載花費了2.2秒。

基於此，我猜測瀏覽器試圖解析並呈現最後4秒的頁面。現在我該怎麼做？我可以進一步挖掘，看看爲什麼？

• 似乎有很多來自各種ScriptResource.axd文件的「佈局」事件，這些都是由Telerik生成的。
• 對佈局記錄也顯示一條警告，指出「強制同步佈局是可能的性能瓶頸」。這是我能控制的東西嗎？將.axd文件組合成單個文件（使用自定義HTTP處理程序？）有什麼幫助？

這些是什麼意思？ Radgrid爲瀏覽器處理的代碼太多了？

1. 分頁打開，但客戶希望每頁至少看1000條記錄。
2. 排序，分頁，行選擇，行 - 右鍵單擊​​菜單等全部啓用/可用。

感謝您的幫助，請讓我知道您是否需要更多信息。

Answer 1

我在你的時間表中看到只有1秒被用於執行JS代碼。 其餘時間用於佈局。 您需要以某種方式修改代碼並減少強制佈局的地方數量。 我認爲這份文件可能對你很有意思。http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

另一種方法是使用視口模式。例如，您只需要爲頁面的可見部分創建行，併爲不可見部分使用具有必要大小的空白div。 當數據量相當大時，這是常用的做法。例如「來源」面板以這種方式工作，並可以顯示具有500k行代碼的文件。

時間軸面板中使用了相同的技術。