翻译|雅虎web性能优化-content篇

该文章阅读需要7分钟,更多文章请点击本人博客halu886

.1. 最小化HTTP请求

80%终端用户的响应时间被花费在前端,大部分时间被当前页面的依赖资源下载占用:图片,样式表,脚本,动画,等等。减少依赖资源的数量从而减少渲染页面所需要HTTP的请求。这是更快的页面的关键。

减少页面的依赖资源的一个方法就是简化页面的设计。但是是否存在方法即使构建更加丰富内容的页面也能实现快速的响应时间呢?以下存在一些技术减少HTTP请求的数量,并且仍然支持丰富的页面设计。拼接文件的挑战在于脚本与样式表在页面之间变化,但是将其作为发布过程中的一部分可以提升响应速度。

CSS Sprites 是一个不错的选择对于减少图片请求,将背景图片整合成一张图片,然后用CSS background-image和background-position属性展示预期的图片内容。

Image Maps 拼接多个图片进一个单个图片。前后的大小大约相等,但是减少了http请求的数量从而提升了页面的响应速度。Image Maps只有图片在一个页面中连续时才生效,例如导航栏。定义Image Maps的坐标非常繁琐和易错的,对于导航栏使用Image Maps也是不可取的,所有这个方案不被建议。

Inline images在页面中使用data:URL shema包裹图片的数据。这会增加HTML文档的大小。将Inline Image与缓存的样式表将会减少HTTP 请求并且组织增加页面的大小,但是Inline Images不被所有主流的浏览器支持。

减少HTTP请求访问是当前页面开始的第一步。这里存在大部分对于第一次访问用户提升性能的准则。正如在Tenni Theurer`s blog文章Browser Cache Usage - Exposed!40%-60%的第一次访问者处于一个空的缓存,对于第一次的访问你的页面更快是提升用户体验的关键。

.2. 减少DNS查找

DNS将主机名映射为IP地址,就像是电话本将人名映射为电话号码。当你输入www.yahoo.com进你的浏览器中,浏览器立马访问DNS服务器返回服务器地址。DNS存在损耗,通常需要损耗20-120毫秒从根据一个主机名到一个IP地址。浏览器不能下载任何资源从主机名,直到DNS查找完成。

DNS从缓存中查找性能更好,它能被缓存在特定的缓存服务器,被用户的宽带提供商或者局域网维护,并且个人电脑上也存在。这个DNS信息被维护在操作系统的DNS缓存(微软则是DNS Client service)。大部分浏览器也存在他们自己的缓存,区别于系统缓存。一旦浏览器在缓存中记录了DNS,它将不会请求操作系统获取记录。

IE默认缓存DNS结果默认三十分钟,可以根据DnsCacheTimeout配置修改。火狐缓存DNS结果为一分钟,network.dnsCacheExpiration配置这个属性。

当客户端当DNS(浏览器和操作系统)缓存为空时,DNS的结果数量等同于当前页面所有不同的主机名的数量。包括当前页面的URL,图片,脚本和样式表和动画等等被使用的主机名。减少不同的主机名的数量就是减少DNS查找的数量。

减少主机名的数量会潜在的减少当前页面并行下载的数量。减少DNS查找缩短响应时间,但是减少并行下载数量可能增加响应时间。我的参考是拆分这些资源通过至少两个但是不超过4个主机名,对于减少DNS查找和并行下载的高度使用的之间一个折中方案。

.3. 阻止重定向

重定向通过301和302状态码完成,下面这个就是301响应体HTTP头部

1
2
3
HTTP/1.1 301 Moved Permanently
Location: http://examle.com/newuri
Content-Type: text/html

浏览器自动带用户到Location字端指定到URL。在头部中到所有信息都是回调所必须到,通常来说响应体为空。不管它们的名称是什么,实践中都不会缓存301和302响应除非新增Expired或者Cache-control表明它应该被缓存。通过刷新按钮和Javascript能够导致用户到不同的地址,但是如果一定要重定向的话则更好的策略则是使用标准的3XX HTTP状态码,首先确保回退按钮能准确工作。

记住重点是重定向将会降低用户体验,在用户与HTML文档之间插入一个重定向将会延迟当前页面的所有东西,当文档到达时,页面上不能渲染并且任何依赖都不能下载。

一个最耗时的重定向频繁发生并且Web开发者通常不在意它。当URL应该有一个反斜杠时但是不存在时则会发生这个问题。例如,访问http://astrology.yahoo.com/astrology导致一个http://astrology.yahoo.com/astrology/(注意新增的斜杠)的重定向。在Apache中能通过Alias或mod_rewrite或者DirectorySlash修复如果你使用Apache handlers。

将新站点链接到老站点是重定向的一个使用场景,另外还包括链接站点的不同部分基于固定的位置(浏览器类型,用户账号类型)进行跳转。使用重定向链接两个站点是相对简单且只需要添加很少的代码。尽管在这些场景使用重定向能够降低开发者的复杂度,但是这会降低用户体验。如果是两个地址访问同一个地址服务器对于重定向可以选择Alias和mod_rewrite。如果重定向中域名发生变化,在Alias和mod_rewrite的组合中可以通过创建一个CNAME(DNS记录中一个域名指向另一个域名的别名)

.4. 缓存Ajax

使用Ajax的一个好处是它立马返回结果因为它是异步请求后端服务器。然而,使用Ajax不能保证用户不会等到这些Javascript和XML异步响应返回。在很多应用中,用户是否保持等待取决于Ajax如何使用。例如,一个Web在线客户端用户将保持等待Ajax请求的根据所有查询条件匹配的返回邮件结果。记住异步不意味着实时十分重要。

优化Ajax响应对于提升性能十分重要。提升Ajax的性能最有效的方案则是缓存响应。正如在添加过期时间或者协商缓存-Control Header讨论中的一样。

让我们来看一个例子。在线邮件客户端2.0使用Ajax自动下载用户的地址簿。如果用户没有修改地址簿自从她上次使用这款应用,那么上一次的地址薄响应能被从缓存中读取如果Ajax响应能够通过过期时间或者协商缓存头部字端进行缓存。浏览器必须通过上一次的地址簿缓存与新的请求响应对比才能得到接到结论。能在Ajax路由上地址上添加一个时间戳表明上次用户修改地址簿解决这个问题,例如,&t=1190241612。如果这个地址自从上次下载时没有被修改,这个时间戳将会和从缓存中读取的地址簿相同从而可以避免额外的HTTP请求。如果用户修改了地址簿,URL上携带的地址簿能够确保不会匹配到缓存中,并且浏览器也会更新缓存中的地址簿条目

谢谢老板,老板必发大财!💰💰💰💰💰💰