提高 web 应用程序的性能（二）

最佳实践

本章将略述能帮助您提高 web 应用程序性能的最佳实践。

减小 HTTP 请求数

每一个 HTTP 请求都有开销，包括查找 DNS、建立链接及等待响应，所以削减没必要要的请求数可减小没必要要的开销。要减小请求数：

• 合并文件。将老是同时使用的脚本合并到同一个文件中，不会减少总大小，但将会 减小请求数。还能够一样方法合并 CSS 文件和图片。能够实现文件自动合并：
  • 在构建阶段。用 <concat > 标记，经过运行 Ant 合并文件。
  • 在运行时阶段。启用 mod_concat 模块。若是 httpServer 是 Apache，用 pack:Tag 做为 JSP 标签库来合并 JavaScript 和样式表文件。(pack:Tag 是一个 JSP-Taglib，可缩减、压缩及合并资源，如 JavaScript 和 CSS，并将它们在内容或普通文件中缓存。）
• 使用 CSS Sprites。将背景图片合并成一个图片，并使用 CSS background-image 和 background-position 属性来显示所需图片部分。还可以使用内联图片减小请求数。

后置加载组件

只呈现须要的组件；其他可等待。最好不要一次呈现太多组件。

某些状况下，可以使用后置加载。因为浏览器可视区域外的组件能够后置加载，当这些组建进入可视区域不久后，初始呈现就会失效。

有些 JavaScript 能够在 onload 事件后后置加载，如 JavaScript 中初始呈现后拖动某个元素。

前置加载组件

经过前置加载组件，能够利用浏览器的空闲时间请求未来会用到的组件（如图像、样式和脚本）。当用户访问下个页面时，若是大多数组件都已在缓存中加载，那页面加载会快得多。

有两种前置加载：

• 无条件：一旦触发 onload，就取得一些额外组件。
• 有条件：根据用户的动做，推测用户下一步的方向并进行相应的前置加载。

将脚本放在底部

脚本可能会产生问题，由于它们可能会阻碍并行下载。当下载脚本时，浏览器不会再启动其余下载 — 即便那些位于不一样主机。将脚本，如样式表，放在底部，以保证它们在其余下载完成后再下载。

也可使用延时脚本，这只有 Internet Explorer 支持。DEFER 属性表示脚本不含 document.write()。这就告诉浏览器他们能够持续呈现。

使用无 cookie 域组件

当浏览器发出对静态图片的请求，并随之发送 cookie 时，服务器不会使用那些 cookie。因为这些 cookie 只会形成没必要要的网络流量，确保用无请求来请求静态组件。而后使用子域和主机保存这些静态组件。

将 JavaScript 和 CSS 放在外部

现实世界中使用外 部文件一般会使页面运行更快，由于 JavaScript 和 CSS 文件被浏览器缓存。HTML 文档内联的 JavaScript 和 CSS 会在每次请求 HTML 文档时被下载。这减小了须要请求的 HTTP 的数量，但增长了 HTML 文档的大小。另外一方面，若是 JavaScript 和 CSS 在被浏览器缓存的外部文件中，就会减少 HTML 文档大小，而不会增长请求数。

 

 

 

 

YSlow

YSlow 根据一组高性能 web 页面准则，经过检查页面上全部组件，包括由 JavaScript 建立的，来分析 web 页面性能。YSlow 是一个集成了 Firebug web 开发工具的 Firefox 插件；它可提供提高页面性能的建议、总结组件性能、显示页面统计数据并提供用于性能分析的工具。

图 3 显示的是 YSlow Grade 选项卡上的信息。

图 3. YSlow Grade 选项卡

YSlow 的 web 页面创建在 22 条可测试的规则基础上，这些规则在下方按重要性和效果排列。研究显示，按照如下规则，web 页面响应时间可提高 25% 到 50%：

• 尽可能减小 HTTP 请求数。
• 使用内容发布网络（CDN）。
• 添加 Expires 或 Cache-Control 头部。
• 用 Gzip 压缩内容。
• 将样式表放在顶部。
• 将脚本放在底部。
• 避免使用 CSS 表达式。
• 将 JavaScript 和 CSS 放在外部。.
• 减小 DNS 搜索。
• 精简 JavaScript 和 CSS。
• 避免使用重定向。
• 删除重复的脚本。
• 配置 ETags。
• 使 Ajax 可缓存。
• 使用 GET 进行 Ajax 请求。
• 减小 DOM 元素数。
• 消除 404 错误。
• 减少 cookie 大小。
• 对组件使用无 cookie 的域。
• 避免使用过滤器。
• 不在 HTML 中测量图片大小。
• 使 favicon.ico 尽量小，可缓存。