我怎樣才能加快這個頁面的速度？

Question

我有一個 ASP.Net WebForms 頁面，它有 2 個下拉列表（1 個有 10 個選項，另一個有大約 600 個）和大約 5 個面板。 根據從下拉列表中選擇的值，在異步回發期間通過查詢數據庫使其他面板可見或不可見。

我的困境是：在慢速連接上頁面速度不夠快，尤其是在頁面加載期間。 查看渲染頁面時，視圖狀態的大小很大，即使在初始加載時也是如此。 此外，還有大量數據需要填充下拉列表，這可能會影響視圖狀態的大小。

有什么建議可以加快這個頁面的速度嗎？

Answer 1

可能按需加載第二個下拉列表的選項（例如，使用AJAX 控件工具包的 AutoComplete或類似控件）。

Answer 2

您可以禁用頁面的事件驗證，這應該會減輕您的視圖狀態的負載（這就是初始加載時出現大量視圖狀態的原因）。 事件驗證確保受約束輸入（下拉列表、復選框列表、單選按鈕列表）中可用的每個選項在渲染之前都已注冊。 該信息與視圖狀態一起被序列化 - 它肯定會殺死你。

您還可以使用不同的方法從 600 項下拉列表中進行選擇。 也許您可以在此處提供 AJAX 自動完成文本框，而不是下拉菜單或一些搜索工具，供用戶搜索並查看他們在 600 個項目的列表中查找的 N 個匹配項。

在我看來，600 對於下拉菜單來說實在是太多了，如果你在更動態地縮小用戶的選擇范圍內投入更多的精力，你可以獲得更多的帶寬收益……但是，是的，我對設計的看法另外，如果您禁用頁面的事件驗證，您會立即看到大幅減少...

<%@ Page Title="Home Page" EnableEventValidation="false" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"  ... more attribs ... />

Answer 3

如果可以，請在各自的Init事件中填充DropDownList控件。 這樣，他們的選項就不會存儲在 ViewState 中。 這可以節省不少字節。

或者更好的是，您可以完全關閉 ViewState 嗎？

Answer 4

gzip html 和 json，減少元素數量和動畫，簡化 html 等，以減少流量和渲染的延遲

Answer 5

你可以做各種各樣的事情來獲得性能！

1) 查看Yahoo 的性能規則以幫助您入門。 這些通常是幫助加快網站速度的最佳實踐列表。

2）查看 Chromes Inspector（設置 -> 工具 -> 開發人員工具）或其他瀏覽器的等效項（firefox 中的 Firebug，我相信 IE9 也有工具）找出主要痛點在哪里。 他們將向您顯示從文件大小到請求數量和頁面加載細分的所有內容。

3）查看 AJAX 並根據需要延遲加載內容。 加載時間仍然存在，但對用戶來說不會那么明顯

4) 檢查查詢的性能，看看是否可以優化它們。

希望這可以幫助！

Answer 6

如果請求接受 zip 或放氣，則讓您的響應返回它。

var response = HttpContext.Current.Response;                

string acceptEncoding = HttpContext.Current.Request.Headers["Accept-Encoding"] ?? "";
if (acceptEncoding.Contains("gzip"))
{
    response.Filter =
        new System.IO.Compression.GZipStream(response.Filter,
            System.IO.Compression.CompressionMode.Compress);
    response.AppendHeader("Content-Encoding", "gzip");
}
else if (acceptEncoding.Contains("deflate"))
{
    response.Filter =
        new System.IO.Compression.DeflateStream(response.Filter,
            System.IO.Compression.CompressionMode.Compress);
    response.AppendHeader("Content-Encoding", "deflate");
}

並將您的ViewState移動到 session。 在基本頁面 class 上覆蓋此屬性。

protected override PageStatePersister PageStatePersister
{
    get { return new SessionPageStatePersister(this); }
}