65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 应用程序客户端性能优化

后现代主义者
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (12投票s)

2008 年 12 月 17 日

CPOL

6分钟阅读

viewsIcon

71763

本文提供了改进 ASP.NET 应用程序客户端性能的指南。

引言

随着具有丰富用户界面的新 Web 应用程序的出现，客户端需要进行大量处理。大部分处理是使用 JavaScript 等脚本语言完成的。市场上出现了许多新框架，从简单的 DOM 操作到最复杂的数据和图表模板。不仅 Facebook、myspace 等 Web 2.0 应用程序广泛使用这项技术，业务线应用程序也正在转向这种模式。Ajax 技术为用户带来了全新的体验，非常接近桌面应用程序。

新浏览器也正在关注这种模式，推出了更快的新 JavaScript 引擎。Chrome 的界面设计给人的印象是一个独立的应用程序运行在桌面上，而不是在浏览器中打开的应用程序。

这种新模式在 Web 应用程序的性能方面带来了许多挑战。客户端框架和其他资源，如自定义 JavaScript 文件、样式表、图像等，都会下载到浏览器上，如果管理不当，可能会严重影响应用程序的性能。

本文更侧重于如何改进 ASP.NET Ajax 应用程序的客户端性能。

以下是提高应用程序性能的一些指导方针：

  • 减少 HTTP 请求
    • 合并文件
    • 使用 CSS Sprites 和图像映射
  • 减小文件大小
    • 压缩文件
    • 压缩文件
  • 添加过期头
  • 将 CSS 文件放在顶部，JS 文件放在底部

这些最佳实践的详尽列表可以在 Yahoo 开发者网站上找到。

减少 HTTP 请求

对于具有丰富用户界面的网站，客户端会下载大量文件。这些文件包括 JavaScript 文件、样式表、图像、Flash、页面等。HTTP 协议对客户端下载的每个文件都会发出单独的请求，这可能会大大减慢页面加载速度，具体取决于文件数量和网络延迟。

jQuery 及其插件、Ajax 工具包、Telerik 等框架也会添加自己的资源。因此，减少这些文件的数量非常重要，可以从根本上改变应用程序的性能。

以下是减少 HTTP 请求数量的一些技术。

合并文件

自定义文件

  • 拥有一个脚本/程序，在部署期间自动获取资源并将它们合并为一个或多个文件。
  • 手动减少文件数量并将它们合并为单个文件。通常我们为了模块化目的创建更多文件，所以这并不是一个真正的最佳实践。
  • 在运行时合并文件并将它们放入缓存中。这可以通过使用 HTTP 处理程序来完成。例如，您可以为所有 JavaScript 和样式表动态创建单独的文件，并将它们添加到应用程序缓存中，以便后续请求使用。
    以下是用于此目的的 ASP.NET 处理程序。您可以将其用作基础代码，然后添加/修改代码以满足您的需求。

    • 使用这些方法时需要考虑一些重要事项。

    • CSS 文件中图像等的 URL 应相对于根目录，否则合并文件中的链接将失效。
    • 如果您正在使用 ASP.NET 主题来处理皮肤，即使您合并了文件，框架仍然会在每个页面的标题中添加主题目录下的所有 CSS 文件。为了避免这种情况，您可以手动删除框架添加的 CSS 文件，并将其替换为合并文件。
    • 对于 JavaScript 文件，您还可以使用 .NET 3.5 SP1 的复合脚本功能。但它有一个限制，即您不能使用超过一定数量的文件。一种权宜之计是使用多个带有复合控件的 ScriptManagerProxy 控件，但这样您将有多个合并文件下载到客户端，而不是一个。

      <asp:ScriptManager ID="ScriptManager1" runat="server" >
<CompositeScript ScriptMode="Release">
<Scripts>
<asp:ScriptReference name="" assembly=""/>
<asp:ScriptReference Path="~/js/Validations.js" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>

框架文件

Telerik、Ajax 工具包等框架都有自己的嵌入式资源，这些资源会下载到客户端。要禁用它并使用合并文件，这些框架确实允许您配置默认行为。例如，对于 Telerik，您可以在控件或应用程序的基础上禁用嵌入式资源，然后通过脚本管理器的 CompositeScript 或上面讨论的另一种方法合并它们。

CSS Sprites 和图像映射

为了进一步减少客户端下载的文件数量，与其拥有多个图像文件，不如将它们合并到一个文件中，然后通过 CSS 的 background-image 和 background-position 属性，使用该文件的一部分来显示特定的图像。

减小文件大小

压缩文件

为了减小文件大小，一件重要的事情是从发送到客户端的文件中删除注释、空格、换行符等。有许多解决方案可以压缩文件，如 JSMin、Yahoo 等。在 CodePlex 中，有一个开源 .NET 项目使用 Yahoo YUI 压缩器来压缩文件。

如果文件是使用处理程序合并的，您可以在同一处理程序中调用此库来压缩合并文件。

压缩文件

压缩可以在代码级别或 IIS 级别完成。使用 HTTP 处理程序合并的文件可以在代码中压缩，并根据浏览器支持等特定条件启用或禁用。

要在 IIS 上启用压缩，请遵循以下指南。

将 CSS 文件放在顶部，JS 文件放在底部

为了减少用户请求页面与显示内容之间的时间延迟，最佳实践是将 CSS 文件添加到顶部的头部，将 JS 文件添加到底部。这样，页面就会在 CSS 文件下载到客户端后立即开始显示，而不会等待 JavaScript 文件，这些文件可以在页面完全加载并客户端可以与之交互后最后加载。

ScriptManager 也有一个参数 LoadScriptsBeforeUI，可以用于此目的。

添加过期头

另一个重要的配置是为图像、JavaScript、样式表等资源激活浏览器缓存。对于静态组件，您也可以配置永不 expires。添加这些头将不会下载已缓存的文件（如果它们已在客户端获取），从而节省了请求数量。

ASP.NET 还提供了一些技术来配置控件和页面的缓存。

工具

有许多工具可以测量页面在客户端的性能。

  • Firefox 的 YSlow 插件
  • Internet Explorer 的开发者工具栏
  • Fiddler

YSlow 提供了深入的视图，以改进性能，并提供了如何实现它的指南。

示例

以下是使用上述指南优化前后 ASP.NET Web 应用程序的一些统计数据。

未经优化的 Yslow 统计数据

StatsWithoutOpt.gif

优化后的 Yslow 统计数据

StatsWithOpt.gif

结果

  • JavaScript 文件数量从 26 减少到 10。
  • 样式表数量从 8 减少到 1。
  • 文件大小显著减小。
  • 通过适当的缓存实现，后续请求下载的文件总数减少到 11 个。

结论

如果实施得当，这些指南可以显著提高应用程序的性能。为此在服务器端付出了大量努力，但即使其中一小部分用于客户端，也可以将性能提升到新的水平。

历史

  • 2008 年 12 月 17 日：首次发布
© . All rights reserved.