改善Web 20 应用程序的性能

《改善Web 20 应用程序的性能》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、简介： 随着Web2.0应用程序的出现和流行，人们使用Internet的方式已经悄然改变。现在，这些Web2.0应用程序拥有许多典型的特征，包括拥有富客户端、大页面、包含许多小项目的页面、大量的JavaScript编码等等。鉴于目前的浏览器技术，大部分这些特征都会导致浏览器端性能问题，特别是在长距离网络中。本文将分析典型Web2.0应用程序的关键方面，并介绍它们如何影响浏览器端性能。本文还将检查浏览器端性能的一个非常重要的部分——浏览器端缓存。简介随着Web2.0应用程序的出现和流行，Internet的使用方式已经发生改变，出现了一种新趋势：针对内容管理、信息共享、通信

2、、团队合作等创建一种更加以用户为中心的方法。从技术角度看，Web2.0应用程序并没有带来很多新的技术突破。但是，这些应用程序的确带来了一种新的Internet使用模式。现在，Web2.0应用程序拥有许多典型特征，包括拥有富客户端、大页面、包含许多小项目的页面、大量的JavaScript编码等等。这些特征会导致浏览器端性能问题，特别是在长距离网络中。这些性能问题会对用户体验造成不利影响，但您甚至不会意识到这些问题的存在。由于开发人员拥有很好的网络条件，因此这些性能问题很难完全暴露出来。本文将首先分析典型的Web2.0应用程序的关键方面，解释它们如何影响浏览器端性能。然后，

3、本文介绍浏览器端性能的一个非常重要的部分——浏览器缓存。通过使用适当的缓存设置，您可以向用户提供较好的应用程序体验。如果您没有一个整体缓存策略设计，那么您的缓存策略不仅会导致低劣的性能，还会引发一些功能缺陷。有许多影响浏览器缓存的规则，其中的部分规则包括Cache-Control、Etag、Expires、Last-Modified和Vary。所有这些设置拥有不同的含义和最适用的情形。困难之处在于对于相同的设置，并不是所有流行浏览器都拥有相同的行为。因此，在您决定使用这些设置之前，您应该准确了解这些浏览器是如何工作的。本文将检查目前市面上最流行的浏览器的行为：Inter

4、netExplorer、Firefox、Chrome和Safari。在本文中，我们还使用IBM®Mashups和开源“RollerWeblogger”来提供一些示例，展示如何应用不同的指令以最好地使用浏览器缓存。背景在当今的Internet环境中，Web2.0应用程序正在变得越来越流行。许多Web站点都使用Web2.0构建，比如Facebook、Youtube等。IBM也有Web2.0应用程序，比如LotusConnections和LotusMashups。以下是一种用于计算浏览器响应时间的基本方法：·浏览器响应时间=服务器端时间+页面加载时间+浏览器呈现时间·页面加载

5、时间=（请求数/并发数）*延迟时间+页面总大小/带宽在上述等式中：·“服务器端时间”是指服务器端处理所花费的时间，比如通过LDAP验证和从数据库检索信息。·“浏览器呈现时间”是指浏览器呈现页面所花费的时间，包括执行JavaScript和解析DOM树的时间。·“请求数”是指HTTP请求的数量。·“并发数”是指浏览器与服务器之间的并行连接的数量。·“页面总大小”是指一个页面的完整大小。·“延迟时间”和“带宽”是网络状态指标。在常见的长距离网络环境中，带宽大约为1M，延迟时间大约为100毫秒。因此，减少到100KB或减少为一个请求能够节约0.1秒响应时间。请注意一点，鉴于真实

6、环境的复杂性，这个等式可能不能涵盖所有情形。在一个典型的Web2.0富Internet应用程序（例如LotusMashupMaker）中，浏览器首先发送格式定义请求到服务器。接收到定义响应数据后，浏览器向服务器发送数据请求。然后，浏览器对用户呈现页面。在这种模式中，有大量的小项目请求，比如JavaScript文件、CSS文件等。在长距离网络环境中，这会导致严重影响用户体验的客户端性能问题。大多数文件是可以被缓存的静态文件，因此，如果您添加适当的缓存控件、expiry头部以及其他影响浏览器缓存的头部元数据，就可以明显改善用户体验。浏览器缓存机制有几个影响浏览器缓存的规则，

7、这个小节将分别讨论它们。Cache-ControlCache-Control是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。cache-control定义是：Cache-Control="Cache-Control"":"cache-directive。表1展示了适用的值。表1.常用cache-directive值Cache-directive说明pu