文档介绍：优化网站速度的最佳实践
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此总结出了一系列可以提高网站速度的方法。一共可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用七部分。
其中内容部分一共十条建议:
尽量减少HTTP请求
减少DNS查找
避免跳转
缓存Ajxa
推迟加载
提前加载
减少DOM元素数量
用域名划分页面内容
使frame数量减少
避免404错误
在页面中图片、css、script、flash等元素都会增加http的请求数,减少这些元素的数量就能减少响应时间。
合并文件:把多个JS、CSS文件尽可能的合并到一个文件里。
尽量少使用内联图像:不要在页面中直接写入图片,应该尽量写进CSS里。
使用图片拼合技术(Css sprites)
减少Http请求次数
在一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。
缓存DNS查找可以改善页面性能。大多数浏览器有独立于操作系统以外的自己的缓存。IE在默认情况下对DNS的查找记录的缓存时间为30分钟。
当客户端的DNS缓存为空时,DNS查找的次数和页面中主机名的数量相同,这其中包括页面中的URL、图片、脚本文件、样式表、flash对象等包含的主机名。也就说减少网站从外部调用资源可以减少DNS查找次数。
减少主机名的数量还可以减少页面中并行下载的数量。减少DNS查找次数可以节省响应时间,但是减少并行下载却会增加响应时间。解决这个问题的指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。
减少DNS的查找次数
使用跳转会降低用户体验,而在用户和HTML中增加一个跳转,会拖延页面中所有元素的显示,因为在HTML文件被加载前任何文件(图像、Flash等)都不会被下载。 有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠(/)却被忽略掉时,虽然“”和“/”仅有一个最后的“/”之差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转。在Apache的服务器中,AME(保存一个域名和另外一个域名之间关系的DNS记录)来避免这个问题。
避免重定向
Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是,使用Ajax并不能保证用户不会在等待异步的 JavaScript和XML响应上花费时间。为了提高性能,优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性。
看一个例子:。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改,而且Ajax响应通过Expire或者Cacke-Control头来实现缓存,那么就可以直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现。如果地址薄在上次下载后没有被编辑过,时间戳就不变,则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄,时间戳就会用来确定新的URL和缓存响应并不匹配,浏览器就会重要请求更新地址薄。
        即使你的Ajxa响应是动态生成的,哪怕它只适用于一个用户,那么它也应该被缓存起来。。
缓存AJAX
简单的说就是最先加载必须的组件进行页面初始化,然后再加载其他内容。
可以把整个过程按照onload事件分隔成两部分。例如,如果你有用于实现拖放和动画的JS,那么它就以等待稍后加载,因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容(即用户操作之后才显现的内容)和处于折叠部分的图像也可以推迟加载。
可以使用一些工具来节省你的工作量:YUI Image Loader可以帮你推迟加载折叠部分的图片。
延迟加载组件
预加载是在浏览器空闲时请求将来可能会用到的页面内容(如图像、样式表和脚本)。使用这种方法,当用户要访问下一个页面时,页面中的内容大部分已经加载到缓存中了,因此可以大大改善访问速度。
几种预加载方法:
无条件加载:触发onload事件时,直接加载额外的页面内容。 有条件加载:根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。。 有预期