页面Yahoo网站性能优化的34条规则新版培训教材

yahoo翻译时间:2021-02-26 阅读:()

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

网站性能优化

一、 Ya ho o网站性能优化的34条规则

1 、尽量减少HTTP请求次数

终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、 Flash等。经过减少页面中的元素能够减少HTTP请求的次数。这是提高网页速度的关键步骤。

减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件是经过把所有的脚本放到一个文件中来减少HTTP请求的方法,如能够简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改进页面性能的重要一步。

CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中,然后经过CS S的bac kground-image和bac kground-pos ition属性来显示图片的不同部分;图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变,可是能够减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

能使用,如导航栏。确定图片的坐标和可能会比较繁琐且容易出错,同时使用图片地图导航也不具有可读性,因此不推荐这种方法;

内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表(可缓存)中能够减少HTTP请求同时又避免增加页面文件的大小。可是内联图像现在还没有得到主流浏览器的支持。

减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的她的博客Browser Cahe Usage -Exposed!中所说,HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧!

2 、减少DNS查找次数

域名系统(DNS )提供了域名和IP的对应关系,就像电话本中人名和她们的电话号码的关系一样。当你在浏览器地址栏中输入,DNS解析服务器就会返回这个域名对应的IP地址。 DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。

缓存DNS查找能够改进页面性能。这种缓存需要一个特定的缓存服务器,这种服务器一般属于用户的ISP提供商或者本地局域网控制,可是它同样会在用户使用的计算

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

机上产生缓存。 DNS信息会保留在操作系统的DNS缓存中(微软Windows系统中DNSClient Servic e) 。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录,因此在一次请求中它不会受到操作系统的影响。

Internet Explorer默认情况下对DNS查找记录的缓存时间为30分钟,它在注册表中的键值为DnsCacheTimeout 。 Firefox对DNS的查找记录缓存时间为1分钟,它在配置文件中的选项为network.dnsCacheExpiration(Fasterfox把这个选项改为了1小时) 。

当客户端中的DNS缓存都为空时(浏览器和操作系统都为空) ,DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL 、图片、脚本文件、样式表、Flash对象等包含的主机名。减少主机名的数量能够减少DNS查找次数。

减少主机名的数量还能够减少页面中并行下载的数量。减少DN S查找次数能够节省响应时间,可是减少并行下载却会增加响应时间。我的指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。

3 、避免跳转

跳转是使用301和302代码实现的。下面是一个响应代码为301的HTTP头:

HTTP/1.1 301 Moved Permanently

Loc ation:

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

Content-Typ e: text/html

浏览器会把用户指向到Loc ation中指定的URL 。头文件中的所有信息在一次跳转中都是必须的, 内容部分能够为空。不论她们的名称,301和302响应都不会被缓存除非增加一个额外的头选项,如Expires或者Cache-Control来指定它缓存。 <meta/>元素的刷新标签和JavaScript也能够实现URL的跳转,可是如果你必须要跳转的时候,最好的方法就是使用标准的3 XXHT T P状态代码,这主要是为了确保 ”后退”按钮能够正确地使用。

可是要记住跳转会降低用户体验。在用户和HT ML文档中间增加一个跳转,会拖延页面中所有元素的显示,因为在HTML文件被加载前任何文件(图像、 F las h等)都不会被下载。

有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠( /)却被忽略掉时。例如,当我们要访问,实际上返回的是一个包含301代码的跳转,它指向的是(注意末尾的斜杠) 。在Apache服务器中能够使用Alias或者mod_rewrite或者the DirectorySlash来避免。

连接新网站和旧网站是跳转功能经常被用到的另一种情况。这种情况下往往要连接网站的不同内容然后根据用户的不同类型(如浏览器类型、用户账号所属类型)来进行跳转。使用跳转来实现两个网站的切换十分简单,需要的代码量也不多。尽管使用这种方法对于开发者来说能够降低复杂程度,可是它同样降低用户体验。一个可替代方法就是如果两者在同一台服务器上时使用Alias和mod_rewrite和实现。如果是因为域名的

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

不同而采用跳转,那么能够经过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DN S记录)来替代。

4 、可缓存的AJAX

Aj ax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。可是,使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。在很多应用中,用户是否需要等待响应取决于Aj ax如何来使用。例如,在一个基于Web的Email客户端中,用户必须等待Ajax返回符合她们条件的邮件查询结果。记住一点, ”异步”并不异味着 ”即时” ,这很重要。

为了提高性能,优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性,具体的讨论能够查看Add an Expires or a Cache-ControlHe ader 。其它的几条规则也同样适用于Ajax:

Gizp压缩文件

减少DNS查找次数

精简JavaScript

避免跳转

配置ETags

让我们来看一个例子:一个Web2.0的Email客户端会使用Aj ax来自动完成对用户地址薄的下载。如果用户在上次使用过Email w eb应用程序后没有对地址薄作任何的修改,

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

而且Ajax响应经过Exp ire或者Cac ke-Control头来实现缓存,那么就能够直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这能够经过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现,例如,&t=等。如果地址薄在上次下载后没有被编辑过,时间戳就不变,则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄,时间戳就会用来确定新的URL和缓存响应并不匹配,浏览器就会重要请求更新地址薄。

即使你的Ajx a响应是动态生成的,哪怕它只适用于一个用户,那么它也应该被缓存起来。这样做能够使你的Web2.0应用程序更加快捷。

5 、推迟加载内容

你能够仔细看一下你的网页, 问问自己 ”哪些内容是页面呈现时所必须首先加载的?哪些内容和结构能够稍后再加载?

把整个过程按照onload事件分隔成两部分,JavaScript是一个理想的选择。例如,如果你有用于实现拖放和动画的JavaScript,那么它就以等待稍后加载,因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容(用户操作之后才显现的内容)和处于折叠部分的图像也能够推迟加载

工具能够节省你的工作量:YUI Image Loader能够帮你推迟加载折叠部分的图片,YUI Get utility是包含JS和CS S的便捷方法。比如你能够打开Firebug的Net选项卡看一下Yahoo的首页。

当性能目标和其它网站开发实践一致时就会相得益彰。这种情况下,经过程序提高网站性能的方法告诉我们,在支持JavaScript的情况下,能够先去除用户体验,不过

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

这要保证你的网站在没有JavaScript也能够正常运行。在确定页面运行正常后,再加载脚原来实现如拖放和动画等更加花哨的效果。

6 、预加载

预加载和后加载看起来似乎恰恰相反,但实际上预加载是为了实现另外一种目标。预加载是在浏览器空闲时请求将来可能会用到的页面内容(如图像、样式表和脚本) 。使用这种方法,当用户要访问下一个页面时,页面中的内容大部分已经加载到缓存中了 ,因此能够大大改进访问速度。

下面提供了几种预加载方法:

无条件加载:触发onload事件时,直接加载额外的页面内容。以Google.c om为例,你能够看一下它的spirit image图像是怎样在onload中加载的。这个spirit image图像在google.com主页中是不需要的,可是却能够在搜索结果页面中用到它。

有条件加载:根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。在search.yahoo.com中你能够看到如何在你输入内容时加载额外的页面内容。有预期的加载:载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后用户抱怨 ”新的页面看起来很酷,可是却比以前慢” 。问题可能出在用户对于你的旧站点建立了完整的缓存,而对于新站点却没有任何缓存内容。因此你能够在访问新站之前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚原来提高访问速度。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

7 、减少DOM元素数量

一个复杂的页面意味着需要下载更多数据,同时也意味着JavaScript遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。

大量的DOM元素的存在意味着页面中有能够不用移除内容只需要替换元素标签就能够精简的部分。你在页面布局中使用表格了吗?你有没有仅仅为了布局而引入更多的<div>元素呢?可能会存在一个适合或者在语意是更贴切的标签能够供你使用。

YUI CSS utilities能够给你的布局带来巨大帮助:grids.css能够帮你实现整体布局,font.css和reset.css能够帮助你移除浏览器默认格式。它提供了一个重新审视你页面中标签的机会, 比如只有在语意上有意义时才使用<div> ,而不是因为它具有换行效果才使用它。

DOM元素数量很容易计算出来,只需要在Firebug的控制台内输入:doc ument.getElements ByTagNam e('*').length

那么多少个DOM元素算是多呢?这能够对照有很好标记使用的类似页面。比如Yahoo!主页是一个内容非常多的页面,可是它只使用了700个元素(HTML标签) 。

8 、根据域名划分页面内容

把页面内容划分成若干部分能够使你最大限度地实现平行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如,你能够把用到的HT ML 内容和动态内容放在,而把页面各种组件(图片、脚本、 C S S)分别存放在static s 1.example.org和static s.example.org上。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

你可在Tenni Theurer和Patty Chi合写的文章Maximizing Parallel Downloads in the CarpoolLane找到更多相关信息。

9 、使iframe的数量最小ifrmae元素能够在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它,这一点很重要。

<iframe>优点:

解决加载缓慢的第三方内容如图标和广告等的加载问题

Security sandbox

并行加载脚本

<iframe>的缺点:

即时内容为空,加载也需要时间

会阻止页面加载

没有语意

10 、不要出现404错误