包含javascript和CSS来减少页面加载时间的更聪明的方法

分享于 

8分钟阅读

Web开发

  繁體 雙語

介绍

网页的显示速度仍然是一个重要的问题。 现在,页面在服务器上的呈现速度不多,而是用户在客户机上经历的时间。 Web页面倾向于获得更多的脚本来处理比较好的交互和更平滑的通信( 像 Ajax )。 这会延长负载时间,因为脚本是同步加载的,每个文件的一个轮到服务器的一个循环。 样式表同样适用。

提高速度的方法是手动将所有JavaScript放入单个文件中,然后将它的缩小。 这很好,但是它引入了一些新的问题,比如调试会变得更加困难。

输入解决方案

如果可以将脚本和样式表保持为可以读的格式,但同时将简化all-in-one文件发送到web浏览器不是很好。 甚至gzip压缩以进一步优化运输? 这就是我们在本文中所做的 !

让我们先为我们的新组件设置一些设计目标,这些目标将提供以下魔力:

这段代码应该。

  • 。be作为 WebControl 构建。
  • 。使用不应该比当前的<script><link> -tags更难。
  • handle处理JavaScript和样式表。
  • produce生成一个单一的,缩小的脚本/样式表版本。
  • 如果请求web浏览器兼容,则传递这里文件 gzip:ed。
  • 。有一个简单的方法来禁用脚本调试。
  • 。仅recompact文件,如果其中任何一个更改了( 在服务器上使用智能缓存)。
  • "。"。缓存客户端的文件,但是以一种将任何更改的文件重新加载的方式。
  • 。不要重新发明轮子。 重用经过验证的代码缩小脚本和样式。

因为有几个真正好的minifiers/压缩机,我决定使用它们中的一个而不是写我自己的。 在 Yahoo上的选择 ! 用户界面库:YUI 压缩器。 NET ( 在女士许可协议下。) 因为它被证明工作良好并且做得很好。 但是,如果你想使用其他代码压缩脚本/css,那么你可以很容易地在类 CssMinifierJavascriptMinifier 中更改实现。

使用代码

我不会对实际实现进行太多的细节,因为我试图尽可以能多地注释代码本身。 但是,我将通过描述这个项目中不同的类来给你一个小的起点。

FileDescription
Common.cs收集从项目其他部分调用的可用函数。
Config.cs包含从 web.config 文件读取的所有属性。
CssMinifier.cs处理样式表的压缩和缩小的代码。
GetPackedFile.cs将被用于从客户端请求的正确文件的页编码。
IncludeCss.cs要在页面中收集应打包的样式表,请在页上使用 WebControl
IncludeScript.cs为了收集应该打包的javascript而在你的页面上使用的WebControl
JavascriptMinifier.cs处理JavaScript文件压缩和缩小的代码

在项目中使用 SmartInclude

我假设你有一个工作组件,或者从演示项目或者你自己构建的程序集中。

我还假设( 最可能出错,但它使指令更容易写) 为你的页面有一个单独的aspx文件。 你更可能将母版页和用户控件用于页的( 如果没有,你可能想考虑)。 在指令 below 中对页面的更改也应该作为你的母版页(。) 和用户控件( .ascx ) 进行。 不管你的包括在哪里,页面本身。页面或者任何用户控件都将包含在一个文件(。每个类型,意味着一个CSS和一个 JavaScript ) 中。

让我们从下面的步骤开始向你的项目添加 SmartInclude:

  • 打开项目。
  • 为web项目添加对 SmartInclude 程序集( 或者项目,如果你打算进行一些调试)的引用。
  • 打开 web.config 文件并在 appSettings -section中添加以下行:
<addkey="SmartIncludeDebugMode"value="false"/><addkey="SmartIncludeXhtmlMode"value="false"/><addkey="SmartIncludePath"value="/includes/"/>

将值更改为 MATCH。 这些值是:

KeyDescription
SmartIncludeDebugMode将值设置为 true,以便启用调试。 在调试模式下,包含的文件被加载到原始。未压缩/非缩放版本,因为它们出现在服务器。
除非你实际调试代码,否则应该将设置为,否则将覆盖任何速度 ups !
SmartIncludeXhtmlMode如果使用 XHTML,则将这里设置为 true,以便 SmartInclude 将正确呈现HTML标记。
SmartIncludePath将它的设置为要存储压缩文件并从中加载它们的绝对路径。
  • SmartInclude 项目复制 Get.aspx 到你在 SmartIncludePath ( 在前一步中) 中写入的同一路径。

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

  • 打开你希望使用 SmartInclude web控件加速的页的aspx文件。
  • 在顶部( 作为第二行) 中添加一行,以在页面上的SmartInclude web控件上进行 register 操作:
<%@RegisterTagPrefix="smart"Namespace="Kaliko.SmartInclude"Assembly="Kaliko.SmartInclude"%>
  • 对于所有包含的JavaScript,更改:
<script type="text/javascript" 
 src="http://www.codeproject.com/myScript.js"></script>

进入:

<smart:IncludeScript Url="/myScript.js" runat="server"/>
  • 对于所有CSS包括,更改:
<linkrel="stylesheet"href="http://www.codeproject.com/style.css"type="text/css">

进入:

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

就是这样你在网络项目中加快了用户感知页面加载时间。

Points of Interest

有很多有用的工具可以帮助你加快页面加载的速度。 其中两个是来自Yahoo和页面速度( 来自谷歌)的,都是用于 Firefox ( 安装了Firebug插件插件)的插件。 我建议你尝试这些插件以获得优化点( 现在当脚本和样式表包含一个等级A 时;)的进一步建议。

在代码中也有一个已知的限制。 它不处理样式表的不同媒体目标。 例如如果要打印的样式表不同,<link> 标记仍然应该包含它。

历史记录

  • 1.2.0 - 应用了几个补丁的最新源代码
  • 1.0 - public 发行版
  • 0.9 - 概念证明

JAVA  Javascript  时间  RED  Include  Reduce  
相关文章