您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 销售管理 > 改善Web20应用程序的性能
简介:随着Web2.0应用程序的出现和流行,人们使用Internet的方式已经悄然改变。现在,这些Web2.0应用程序拥有许多典型的特征,包括拥有富客户端、大页面、包含许多小项目的页面、大量的JavaScript编码等等。鉴于目前的浏览器技术,大部分这些特征都会导致浏览器端性能问题,特别是在长距离网络中。本文将分析典型Web2.0应用程序的关键方面,并介绍它们如何影响浏览器端性能。本文还将检查浏览器端性能的一个非常重要的部分——浏览器端缓存。简介随着Web2.0应用程序的出现和流行,Internet的使用方式已经发生改变,出现了一种新趋势:针对内容管理、信息共享、通信、团队合作等创建一种更加以用户为中心的方法。从技术角度看,Web2.0应用程序并没有带来很多新的技术突破。但是,这些应用程序的确带来了一种新的Internet使用模式。现在,Web2.0应用程序拥有许多典型特征,包括拥有富客户端、大页面、包含许多小项目的页面、大量的JavaScript编码等等。这些特征会导致浏览器端性能问题,特别是在长距离网络中。这些性能问题会对用户体验造成不利影响,但您甚至不会意识到这些问题的存在。由于开发人员拥有很好的网络条件,因此这些性能问题很难完全暴露出来。本文将首先分析典型的Web2.0应用程序的关键方面,解释它们如何影响浏览器端性能。然后,本文介绍浏览器端性能的一个非常重要的部分——浏览器缓存。通过使用适当的缓存设置,您可以向用户提供较好的应用程序体验。如果您没有一个整体缓存策略设计,那么您的缓存策略不仅会导致低劣的性能,还会引发一些功能缺陷。有许多影响浏览器缓存的规则,其中的部分规则包括Cache-Control、Etag、Expires、Last-Modified和Vary。所有这些设置拥有不同的含义和最适用的情形。困难之处在于对于相同的设置,并不是所有流行浏览器都拥有相同的行为。因此,在您决定使用这些设置之前,您应该准确了解这些浏览器是如何工作的。本文将检查目前市面上最流行的浏览器的行为:InternetExplorer、Firefox、Chrome和Safari。在本文中,我们还使用IBM®Mashups和开源“RollerWeblogger”来提供一些示例,展示如何应用不同的指令以最好地使用浏览器缓存。背景在当今的Internet环境中,Web2.0应用程序正在变得越来越流行。许多Web站点都使用Web2.0构建,比如Facebook、Youtube等。IBM也有Web2.0应用程序,比如LotusConnections和LotusMashups。以下是一种用于计算浏览器响应时间的基本方法:浏览器响应时间=服务器端时间+页面加载时间+浏览器呈现时间页面加载时间=(请求数/并发数)*延迟时间+页面总大小/带宽在上述等式中:“服务器端时间”是指服务器端处理所花费的时间,比如通过LDAP验证和从数据库检索信息。“浏览器呈现时间”是指浏览器呈现页面所花费的时间,包括执行JavaScript和解析DOM树的时间。“请求数”是指HTTP请求的数量。“并发数”是指浏览器与服务器之间的并行连接的数量。“页面总大小”是指一个页面的完整大小。“延迟时间”和“带宽”是网络状态指标。在常见的长距离网络环境中,带宽大约为1M,延迟时间大约为100毫秒。因此,减少到100KB或减少为一个请求能够节约0.1秒响应时间。请注意一点,鉴于真实环境的复杂性,这个等式可能不能涵盖所有情形。在一个典型的Web2.0富Internet应用程序(例如LotusMashupMaker)中,浏览器首先发送格式定义请求到服务器。接收到定义响应数据后,浏览器向服务器发送数据请求。然后,浏览器对用户呈现页面。在这种模式中,有大量的小项目请求,比如JavaScript文件、CSS文件等。在长距离网络环境中,这会导致严重影响用户体验的客户端性能问题。大多数文件是可以被缓存的静态文件,因此,如果您添加适当的缓存控件、expiry头部以及其他影响浏览器缓存的头部元数据,就可以明显改善用户体验。浏览器缓存机制有几个影响浏览器缓存的规则,这个小节将分别讨论它们。Cache-ControlCache-Control是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。cache-control定义是:Cache-Control=Cache-Control:cache-directive。表1展示了适用的值。表1.常用cache-directive值Cache-directive说明public所有内容都将被缓存private内容只缓存到私有缓存中no-cache所有内容都不会被缓存no-store所有内容都不会被缓存到缓存或Internet临时文件中must-revalidation/proxy-revalidation如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证max-age=xxx(xxxisnumeric)缓存的内容将在xxx秒后失效表2表明在不同的情形下,浏览器是将请求重新发送到服务器还是使用缓存的内容。表2.对cache-directive值的浏览器响应Cache-directive打开一个新的浏览器窗口在原窗口中单击Enter按钮刷新单击Back按钮public浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务浏览器呈现来自缓存的页面器private浏览器重新发送请求到服务器第一次,浏览器重新发送请求到服务器;此后,浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面no-cache/no-store浏览器重新发送请求到服务器浏览器重新发送请求到服务器浏览器重新发送请求到服务器浏览器重新发送请求到服务器must-revalidation/proxy-revalidation浏览器重新发送请求到服务器第一次,浏览器重新发送请求到服务器;此后,浏览器呈现来自缓存的页面浏览器重新发送请求到服务器浏览器呈现来自缓存的页面max-age=xxx(xxxisnumeric)在xxx秒后,浏览器重新发送请求到服务器在xxx秒后,浏览器重新发送请求到服务器浏览器重新发送请求到服务器在xxx秒后,浏览器重新发送请求到服务器Cache-Control是关于浏览器缓存的最重要的设置,因为它覆盖其他设置,比如Expires和Last-Modified。另外,由于浏览器的行为基本相同,这个属性是处理跨浏览器缓存问题的最有效的方法。失效Expires头部字段提供一个日期和时间,响应在该日期和时间后被认为失效。失效的缓存条目通常不会被缓存(无论是代理缓存还是用户代理缓存)返回,除非首先通过原始服务器(或者拥有该实体的最新副本的中介缓存)验证。(注意:cache-controlmax-age和s-maxage将覆盖Expires头部。)Expires字段接收以下格式的值:“Expires:Sun,08Nov200903:37:26GMT”。如果查看内容时的日期在给定的日期之前,则认为该内容没有失效并从缓存中提取出来。反之,则认为该内容失效,缓存将采取一些措施。表3-6表明针对不同用户操作的不同浏览器的行为。表3.当用户打开一个新的浏览器窗口时的失效操作Firefox3.5IE8Chrome3Safari4内容没有失效浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是200浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面内容失效浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200表4.当用户在原始浏览器窗口中单击Enter按钮时的失效操作Firefox3.5IE8Chrome3Safari4内容没有失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304内容失效浏览器重新发送请求到服务器。返回代码是200浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200表5.当用户按F5键刷新页面时的失效操作Firefox3.5IE8Chrome3Safari4内容没有失效浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304内容失效浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200表6.当用户单击Back或Forward按钮时的失效操作Firefox3.5IE8Chrome3Safari4内容没有失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面内容失效浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是200注意:所有浏览器都假定为使用默认设置运行。Last-Modified/E-TagLast-Modified实体头部字段值通常用作一个缓存验证器。简单来说,如果实体值在Last-Modified值之后没有被更改,则认为该缓存条目有效。ETag响应头部字段值是一个实体标记,它提供一个“不透明”的缓存验证器。这可能在以下几种情况下提供更可靠的验证:不方便存储修改日期;HTTP日期值的one-second解决方案不够用;或者原始服务器希望避免由于使用修改日期而导致的某些冲突。不同的浏览器有不同的配置行为。表7-10表明针对不同用户操作的不同浏览器的行为。表7.当用户打开一个新的浏览器窗口时的Last-ModifiedE-Tag操作Firefox3.5IE8Chrome3Safari4内容自上次访问以来没有被修改浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200表8.当用户在原始浏览器窗口中单击Enter按钮时的Last-ModifiedE-Tag操作Firefox3.5IE8Chrome3Safari4内容自上次访问以来没有被修改浏览器呈现来自缓存的页面浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是200浏览器呈现来自缓存的页面浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200表9.当用户按F5键刷新页面时的Last-ModifiedE-Tag操作Firefox3.5IE8Chrome3Safari4内容自上次访问以来没有被修改浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304浏览器重新发送请求到服务器。返回代码是304内容自上次访问以来已经被修改浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200浏览器重新发送请求到服务器。返回代码是200表10.没有缓存设置且用户单击Back或
本文标题:改善Web20应用程序的性能
链接地址:https://www.777doc.com/doc-2416554 .html