简述:
如何让我们站点更快速呢
原文出处: https://developer.yahoo.com/performance/rules.html
这里做一下笔记先不做深入
1.
Never expire
Cache-Control
如果使用永不过期,那在每一次更新组件时,都需要变更文件名称
比如原来是a_1.0.0.js, 更新之后变为a_1.0.1.js
2.使用gzip
在scripts 和stylesheets,以及一些文本类型数据,如JSON, XML
但是在例如图片、PDF上就没有必要做了,因为他们本身就已经压缩处理了
3. css 外联样式
把样式文件放在head里,这样可以让用户访问一个站点时,至少在视觉上现有反馈
4.不要出现在CSS中动态变换的数据
例如,
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
5. 不要出现<img src="" ...
或者 js中 var img = new Image(); img.src = ""空
因为如果为空的话 还是会发出请求(例如在IE, Sarifi, Chrome)
6.优化图片
推荐一款imagemagick http://www.imagemagick.org/script/binary-releases.php#macosx
指令有,convert image.gif image.png
7. 避免Redirect重定向
路径末尾添加"/", 防止出现多余的重定向
例如http://domain.anialy.com/test
应该记得添加, http://domain.anialy.com/test/
对同一个域名下, 使用Alias
或者 mod_rewrite, 如果确实域名变了,
那就用CNAME(一种DNS记录,产生一个标记,用来标识domain之间的指向)
8. ETag
ETag 用来确定 浏览器缓存的组件
例如image、js、stylesheet是否和服务器是相同的
用ETag的表头,可以定义ETag返回的表头。
eg,
服务器上生成了一个component的表头
HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195
如果和服务器上得ETag版本相同,
则会302客户端跳转到浏览器缓存中得component,
GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified
但是在Apache和IIS服务器上,不同主机的ETag值不同
所以在亲和式负载均衡上,会出现不同的服务器主机生成的ETag不同的情况
9. Ajax 缓存判定
通过添加时间戳timestamp达到判定是否和上一次ajax获取数据相同,
如果相同,则直接从缓存中提取
10.在服务器端开发中使用flush
flush是将服务器端生成的页面部分先行输出
例如 可以在
<head>
<css, js include.....
</head>
jsp:flush一把, 先将页面的部分css,js引入
11. 如果没有什么额外需要,尽量使用get方法替代post
由于post需要先发送header, 然后再发送data.
一般是规定,只从服务器取数据那就用GET,如果需要存数据就用POST
12. 预加载
例如在某个页面,并不需要请求多少components, 这时,可以做出预判,
在浏览器请求idle的这段时间里,可用来加载之后可能访问的页面需要的
components(如styles,scripts。。。)。
13. Cookie Free -- 静态文件不要传cookie
对于image, styles, scripts这种静态文件,就不要朝里面传cookie,
通过域名设置任然无法避免静态文件cookie传入,那就只能新建一个domain
所以cookie配置时候不应该配置成*.exmaple.org这种全局域名
取而代之,应该设置子域名。
14. 正确使用事件驱动
YUI工具可以做到事件驱动优化
http://yui.github.io/yui2/
另外有一篇 ajax应用 高性能使用的文章
http://yuiblog.com/blog/2007/12/20/video-lecomte/