网页站点加速守则

简述:

如何让我们站点更快速呢

原文出处: 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/
















你可能感兴趣的:(网页站点加速守则)