jq加载出一年的日历_减少一年后的页面加载时间-CSDN博客

jq加载出一年的日历

一年多以前，我在博客中介绍了页面加载时间和Jawr 。从那时起，我的项目要么是Intranet应用程序，其中加载时间不成问题，要么我们在所使用的工具中没有发言权。因此，我无法使用当时发现的任何工具。现在，我很快就会遇到将要由我们网络之外的人使用的应用程序，我当然希望该应用程序尽可能地响应。结合以前的Yahoo最佳实践，我在网络上寻找可以帮助我执行这些工具的工具。

我深信不疑的一条规则是：减少HTTP请求的数量。我认为此规则影响最大，因为浏览器一次最多只能发送2个HTTP请求。让我们举一个经典的例子。按钮在许多应用程序中起着重要的作用，并且在大多数情况下，您在按钮上放置一个图标是为了使它们与用户的思想联系在一起。就像这样简单地完成：

<button><imgsrc="path/to/my/image"/> Label </button>

这意味着任何显示多种按钮类型的屏幕都有可能变慢。大幅减少请求数量的一种方法是将所有图像聚合在一起并使用CSS背景图像。后者自CSS的第一个版本开始可用，只需指定background-image属性即可在element后面显示图像。这种用法称为CSS Sprites 。现在的代码如下所示：

<buttonclass="update"> Label </button>

button.update{
  background-image:url('path/to/my/image');
  background-repeat:no-repeat;
}

精明的读者会指出，先前的代码与<button>的<img>具有相同的作用。真正的用法是仅使用所需的主映像部分，类似于以下内容：

button.update{
  background:transparenturl('path/to/my/aggregate')-50px-50pxno-repeat;
}

聚合主图像需要正确的图像工具。要计算每个按钮所需的部分，这是一种痛苦（礼貌地说）。

SmartSprites徽标

幸运的是，我的老朋友Jawr具有帮助我的正确功能。从3.2版开始，它包括SmartSprites ，该产品只为我完成所有聚合和计算。这是如何运作的？只需在CSS中添加一些注释即可：

声明如何构造主图像
告诉哪个精灵将参与哪个主图像

/** sprite: master-sprite-gif; sprite-image: url('../img/master-sprite.gif'); sprite-layout: vertical */

button.one{
  background-image:url('../img/certificate_preferences.gif');/** sprite-ref: master-sprite-gif; */
}

button.two{
  background-image:url('../img/inbox_into.gif');/** sprite-ref: master-sprite-gif; */
}

button.three{
  background-image:url('../img/mail_forward.gif');/** sprite-ref: master-sprite-gif; */
}

以前CSS是一个示例，通过该示例可以在运行时在../img/master-sprite.gif下找到所有三个GIF。如果查看生成CSS，它将具有以下外观：

button.one{background-image:url('../cb3648025844/img/master-sprite.gif');background-position:left-0px;}

button.two{background-image:url('../cb3648025844/img/master-sprite.gif');background-position:left-48px;}

button.three{background-image:url('../cb3648025844/img/master-sprite.gif');background-position:left-96px;}

当然，实际生成CSS将被串联并缩小（请参见下文）。

注意：我不是GIF专家，但我怀疑原始GIF应该具有相似的色表，否则，汇总的GIF看起来会很奇怪。

但是，Jawr还提供了一些非常有趣的功能，包括新旧功能：

最小化，适用于CSS和JavaScript。您还可以选择缩小引擎（嵌入式， JSMin或YUI Compressor ）。后者甚至可以混淆您的源代码，从而使您的JS更加轻巧
包含许可证，因此即使是小型资源也可以显示其许可证
如果客户端浏览器支持运行时GZip压缩
HTTP标头管理，以便对相同资源（在第一个资源旁边）的请求将由HTTP 304-未修改的代码回答，从而避免了不必要的网络流量
i18n管理以便将Java标准属性文件用于JavaScript中的国际化消息
JavaScript在纯HTML页面中使用不带标签库的JawrJavaScript（尽管不建议这样做，因为它向页面中添加了脚本，从而增加了另一个HTTP请求）
带有新的前置和后置处理器的扩展可能性
在开发模式（无需修改资源）和生产（由Jawr提供的虚拟资源）之间切换的能力
捆绑预处理，因此处理不是在启动时完成，而是在构建时完成：可以通过调用Ant任务或配置Maven插件来完成
对于真正敬业的应用程序服务器管理员，支持JMX