我怎样才能加快这个页面的速度？

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); }
}