yahoo web性能优化最佳实践

包含35条最佳实践原则,总共7个类别。
分类包括:
content
server
cookie
css
javascript
images
mobile
 
1.最小化http请求
tag:content
 
终端用户的80%的请求时间是在前端。这些时间中,大部分时间消耗在加载:图片、样式表、脚本和flash等等。依次减少上述的元素,减少渲染页面所需的http请求数目,是让页面更快的关键。
以下一些技术是可以减少http请求:
 
合并文件。可以通过把所有脚本合并成一个脚本,把所有的css放在一个样式表里。
 
css sprites。使用css sprites技术减少图片的请求。
 
base64编码。这项技术会增加html文件的大小,但是可以减少请求次数。
 
2.使用CDN
tag:server
 
3.添加 Expires 或 Cache-Control 头
tag:server
 
这里有两条规则:
对于静态资源:通过设置一个很远的过期时间来实现“从不过期”
对于动态资源:用一个适当的 Cache-Control 头来帮助浏览器控制请求。
浏览器利用缓存来减少http请求的数目和大小,让页面加载的更快。web服务器利用http响应中的Expires头来告诉客户端一个资源能够被缓存多久。
需要注意的是,如果你利用了一个“不过期”的Expires头,你必须在资源改变的同时改变资源的名字。
这一技术提高页面性能是基于用户已经访问过你的网站的基础之上的。
 
4.Gzip资源
tag:server
 
在http/1.1中,web客户端明确支持在http请求中 Accept-Encoding 头 的 Accept-Encoding: gzip, deflate 压缩方式。
 
     Gzip是当前最流行,最有效的压缩方式。
 
Gzip一般能减少服务器响应文件70%的大小。90%的浏览器都支持gzip。
 
服务器基于文件类型来选择gzip压缩,但是这明显限制了他们什么东西他们能决定压缩。很多网站gzip他们的html文件,同样也可以gzip你的脚本和样式表。
事实上,任何的响应文本,包括xml和json都有压缩的价值,图片和pdf文件不应该被gizp,因为他们已经被压缩过了。
 
5.将样式表放在头部
tag:css
 
我们发现将样式表移到文件的HEAD可以让页面加载的更快,这是因为将样式表放在头部有利于页面渲染。
 
将样式表放在底部的问题是它阻止了许多浏览器的渲染进度。这些浏览器会锁定渲染进程来保证页面上的元素在他们的样式改变时重绘。
 
6.将脚本放在底部
tag:javascript
 
这一问题的原因是脚本是并行阻塞下载的。HTTP/1.1协议中建议浏览器不在同一域名下并行下载多于两个的资源。假如你的图片是在多个域名下的,你可以并行下载超过两张的图片。可是一个脚本在下载的时候,浏览器不能再开始其他的下载,即使在不同的域名下。
 
一个可供采纳的建议是利用延迟加载脚本技术(defer)。这是一种可以让浏览器继续渲染的方案。不幸的是,fireforx不支持defer属性。
 
7.避免使用css表达式
tag:css
 
8.外联js和css
tag:javascript,css
 
9.最小化javascript和css
tag:javascript,css
 
10.避免重定向
tag:content
 
11.去除重复的脚本
tag:javascript 
 
12.配置 ETags
tag:server
 
13.让Ajax可缓冲
tag:content
 
14.尽早的flush缓冲
tag:server
 
15.使用GET方法完成Ajax请求
tag:server
 
16.使用post-load方法加载资源
tag:content
 
等待document加载完成后再加载类似脚本的资源。
 
17.预加载资源
tag:content
 
18.减少dom数目
tag:content
 
19.划分资源所在的域
tag:content
 
20.减少DOM访问
tag:javascript
 
21.巧妙使用event handlers
tag:javascript
 
巧妙利用事件冒泡机制来进行事件绑定的优化
 
22.选择使用<link>而不是@import
tag:css
 
在IE中,使用@import相当于将<link>放在页面底部。
 
23.避免使用Filter
tag:css
 
使用filter的问题是它会阻塞渲染并且当浏览在加载图片时,会冻结浏览器。它也会提升内存消耗,它是作用于一个元素而不是一个图片,所以问题会更严重。
最好的解决方案是完全避免使用AlphaImageLoader,用PNG8来代替。
 
24.优化图片
tag:images
 
25.优化CSS Sprites
tag:images
 
将图片水平放置在sprite中可以让文件大小更小。
将颜色相同的图片放置在sprite中可以让图片在理论上少于256个颜色从而更好的适应PNG8。
 
26.不要再HTML中缩放图片
tag:images
 
27.让favicon.ico尽量小并且可缓存
tag:images
 
28.保持资源在25k一下
tag:mobile
 
iphone不会缓存25k以上的资源(注意,这是指没有压缩过的大小)
 
29.将资源打包在一个复合文本中
tag:mobile
 
30.避免图片中有空链接
tag:server
 
例如:
 
straight HTML
      <img src="">
 
JavaScript
      var img = new Image();
      img.src = "";
 
31.减少iframes的数目
tag:content
 
32.不要出现404请求
tag:content
 
33.减小cookie的大小
tag:cookie
 
34.静态资源的请求中不要带上cookie
tag:cookie
 
35.减少cdn查找次数
tag:content
posted @ 2013-08-28 18:56  清风妙康  阅读(367)  评论(0编辑  收藏  举报