文档介绍：改善 Web 应用程序的性能
探秘不同的浏览器端缓存机制
Jian Qiao Sun, 软件工程师, IBM
Hua Pin Shen, 顾问软件工程师, IBM
简介: 随着 Web 应用程序的出现和流行,人们使用 的方式已经悄然改变。现在,这些 Web 应用程序拥有许多典型的特征,包括拥有富客户端、大页面、包含许多小项目的页面、大量的 JavaScript 编码等等。鉴于目前的浏览器技术,大部分这些特征都会导致浏览器端性能问题,特别是在长距离网络中。本文将分析典型 Web 应用程序的关键方面,并介绍它们如何影响浏览器端性能。本文还将检查浏览器端性能的一个非常重要的部分——浏览器端缓存。
发布日期: 2010 年 2 月 25 日 
级别: 中级 
其他语言版本: 英文
 平均分(共 2 个评分)
简介
随着 Web 应用程序的出现和流行, 的使用方式已经发生改变,出现了一种新趋势:针对内容管理、信息共享、通信、团队合作等创建一种更加以用户为中心的方法。从技术角度看,Web 应用程序并没有带来很多新的技术突破。但是,这些应用程序的确带来了一种新的 使用模式。现在,Web 应用程序拥有许多典型特征,包括拥有富客户端、大页面、包含许多小项目的页面、大量的 JavaScript 编码等等。这些特征会导致浏览器端性能问题,特别是在长距离网络中。这些性能问题会对用户体验造成不利影响,但您甚至不会意识到这些问题的存在。由于开发人员拥有很好的网络条件,因此这些性能问题很难完全暴露出来。
本文将首先分析典型的 Web 应用程序的关键方面,解释它们如何影响浏览器端性能。然后,本文介绍浏览器端性能的一个非常重要的部分——浏览器缓存。通过使用适当的缓存设置,您可以向用户提供较好的应用程序体验。如果您没有一个整体缓存策略设计,那么您的缓存策略不仅会导致低劣的性能,还会引发一些功能缺陷。
有许多影响浏览器缓存的规则,其中的部分规则包括 Cache-Control、Etag、Expires、Last-Modified 和 Vary。所有这些设置拥有不同的含义和最适用的情形。困难之处在于对于相同的设置,并不是所有流行浏览器都拥有相同的行为。因此,在您决定使用这些设置之前,您应该准确了解这些浏览器是如何工作的。本文将检查目前市面上最流行的浏览器的行为: Explorer、Firefox、Chrome 和 Safari。
在本文中,我们还使用 IBM® Mashups 和开源“Roller Weblogger”来提供一些示例,展示如何应用不同的指令以最好地使用浏览器缓存。
背景
在当今的 环境中,Web 应用程序正在变得越来越流行。许多 Web 站点都使用 Web 构建,比如 Facebook、Youtube 等。IBM 也有 Web 应用程序,比如 Lotus Connections 和 Lotus Mashups。
以下是一种用于计算浏览器响应时间的基本方法:
浏览器响应时间= 服务器端时间+ 页面加载时间+ 浏览器呈现时间
页面加载时间= (请求数/ 并发数)* 延迟时间+ 页面总大小/ 带宽
在上述等式中:
“服务器端时间”是指服务器端处理所花费的时间,比如通过 LDAP 验证和从数据库检索信息。
“浏览器呈现时间”是指浏览器呈现页面所花费的时间,包括执行 JavaScript 和解析 DOM 树的时间。
“请求数”是指 HTTP 请求的数量。
“并发数”是指浏览器与服务器之间的并行连接的数量。
“页面总大小”是指一个页面的完整大小。
“延迟时间”和“带宽”是网络状态指标。在常见的长距离网络环境中,带宽大约为 1M,延迟时间大约为 100 毫秒。因此,减少到 100KB 或减少为一个请求能够节约 秒响应时间。
请注意一点,鉴于真实环境的复杂性,这个等式可能不能涵盖所有情形。
在一个典型的 Web 富 应用程序(例如 Lotus Mashup Maker)中,浏览器首先发送格式定义请求到服务器。接收到定义响应数据后,浏览器向服务器发送数据请求。然后,浏览器对用户呈现页面。在这种模式中,有大量的小项目请求,比如 JavaScript 文件、CSS 文件等。在长距离网络环境中,这会导致严重影响用户体验的客户端性能问题。大多数文件是可以被缓存的静态文件,因此,如果您添加适当的缓存控件、expiry 头部以及其他影响浏览器缓存的头部元数据,就可以明显改善用户体验。
浏览器缓存机制
有几个影响浏览器缓存的规则,这个小节将分别讨论它们。
Cache-Control
Cache-Control 是最重要