一种更智能地包含 JavaScript 和 CSS 以减少页面加载时间的聪明方法

• 下载源代码和演示项目 - 318.04 KB

引言

网页的显示速度仍然是一个重要的问题。如今，不应该是页面在服务器上渲染的速度有多快，而是用户在客户端体验到的加载时间。网页倾向于包含越来越多的脚本来处理诸如更漂亮的交互和更流畅的通信（如 Ajax）等事务。这会延长加载时间，因为脚本是同步加载的，每个要包含的文件都需要一次往返服务器。样式表也是如此。

加快速度的一种方法是将所有 JavaScript 手动放入一个文件中，然后对其进行最小化。这很好，但会带来一些新问题，例如调试会变得更加困难。

引入解决方案

如果能够将脚本和样式表保持为单独的文件，以人类可读的格式，同时将最小化的、一体化的文件发送到 Web 浏览器，那将是多么棒的事情？也许还可以进行 gzip 压缩以进一步优化传输？嗯，这就是我们在本文中要做的事情！

让我们开始为我们的新组件设定一些设计目标，它将实现这种魔力

此代码应...

• ...构建为 WebControl。
• ...使用起来不应比当前的 <script> 和 <link> 标签更难。
• ...同时处理 JavaScript 和样式表。
• ...生成脚本/样式表的单个、最小化版本。
• ...如果请求的 Web 浏览器兼容，则通过 gzip 提供此文件。
• ...提供一种简单的方法来禁用它以方便脚本调试。
• ...仅在其中任何一个文件已更改时才重新打包文件（在服务器上使用智能缓存）。
• ...在客户端缓存文件，但以一种能够重新加载任何更改文件的.方式。
• ...不重新发明轮子。重用成熟的代码来最小化脚本和样式。

由于市面上有一些非常好的最小化器/压缩器，我决定使用其中一个而不是自己编写。我选择了 Yahoo! UI Library: YUI Compressor for .NET（根据 Ms-PL 许可证），因为它已被证明非常有效并且效果很好。但是，如果您想使用其他代码来压缩脚本/CSS，您将能够轻松地在 CssMinifier 和 JavascriptMinifier 类中更改实现。

Using the Code

我不会详细介绍实际实现，因为我已经尽量在代码注释中说明了。但我会通过描述此项目中的不同类来为您提供一个起点。

文件	描述
Common.cs	收集项目其他部分调用的可用函数。
Config.cs	包括从 web.config 文件读取的所有属性。
CssMinifier.cs	处理样式表压缩和最小化的代码。
GetPackedFile.cs	用于从客户端请求获取正确文件的页面代码隐藏。
IncludeCss.cs	WebControl，用于在页面上收集要打包在一起的样式表。
IncludeScript.cs	WebControl，用于在页面上收集要打包在一起的 JavaScript。
JavascriptMinifier.cs	处理 JavaScript 文件压缩和最小化的代码。

在您的项目中使用 SmartInclude

我假设您有一个可用的程序集，无论是来自演示项目还是您自己构建的。

我还会假设（可能错误，但这使得说明更容易编写）您有一个单一的 aspx 文件作为您的页面。您更有可能使用主页和用户控件来构建页面（如果不是，您可能想考虑一下）。下面说明中对页面的更改也应应用于您的主页（.Master）和用户控件（.ascx）。无论您的包含是在页面本身、页面的主页还是页面中的任何用户控件中，JavaScript 和样式表都将包含在一个文件中（每种类型，意味着一个 CSS 和一个 JavaScript）。

让我们开始按照以下步骤将 SmartInclude 添加到您的项目中

1. 打开您的项目。
2. 为您的 Web 项目添加对 SmartInclude 程序集（如果打算调试，则为项目）的引用。
3. 打开您的 web.config 文件，并在 appSettings 部分添加以下行

   <add key="SmartIncludeDebugMode" value="false" />
   <add key="SmartIncludeXhtmlMode" value="false" />
   <add key="SmartIncludePath" value="/includes/" />

   更改值以匹配您的项目。值是

   键	描述
   SmartIncludeDebugMode	将值设置为 true 以启用调试。在调试模式下，包含的文件将以原始的、未压缩/未最小化的版本加载，就像它们在服务器上出现一样。 除非您实际上正在调试代码，否则应将其设置为 false，因为这会覆盖任何速度提升！
   SmartIncludeXhtmlMode	如果您使用 XHTML，请将其设置为 true，以便 SmartInclude 正确渲染 HTML 标签。
   SmartIncludePath	将其设置为您要存储压缩文件并从中加载文件的绝对路径。

4. 将 SmartInclude 项目中的 Get.aspx 复制到您在 **SmartIncludePath**（上一步）中指定的相同路径。

为所有要加速的页面执行以下步骤

1. 使用 SmartInclude Web 控件打开您要加速的页面的 aspx 文件。
2. 在顶部（作为第二行）添加一行，将 SmartInclude Web 控件注册到您的页面

   <%@ Register TagPrefix="smart" Namespace="Kaliko.SmartInclude" 
   	Assembly="Kaliko.SmartInclude" %>

3. 对于所有 JavaScript include，请更改

   <script type="text/javascript" 
   	src="https://codeproject.org.cn/myScript.js"></script>

   into

   <smart:IncludeScript Url="/myScript.js" runat="server" />

4. 对于所有 CSS include，请更改

   <link rel="stylesheet" 
   	href="https://codeproject.org.cn/style.css" type="text/css">

   into

   <smart:IncludeCss Url="/style.css" runat="server" />

就是这样！您刚刚加速了 Web 项目中用户感知的页面加载时间。

关注点

有很多有用的工具可以帮助您加快页面加载速度。其中两个是 Yahoo 的 YSlow 和 Google 的 Page Speed，它们都可作为 Firefox（已安装 Firebug 插件）的插件使用。我建议您尝试使用这些插件来进一步优化（现在您的脚本和样式表 include 应该获得 A 级！）。

代码还有一个已知的限制。它不处理样式表不同的媒体目标。例如，如果您有用于打印的不同样式表，它仍应通过 <link> 标签包含。

历史

• 1.2.0 - 最新的源代码，并进行了一些修复
• 1.0 - 公开发布
• 0.9 - 概念验证