WEB性能优化系列一

最近一直在看Google Page Speed中介绍的Web Performance Best Practices以及Yahoo!的
Best Practices for Speeding Up Your Web Site,并且浏览了很多其他叙述有关WEB性能优化的文章后有一点感悟:当新技术新思想引进国内的时候,国外已经发展相对比较或者绝对成熟、研究有一定深度而且最主要的是理念已经被广为传播开来并为大家所熟知。而联想到国内当前的技术环境和理念创新方面,还是有待提高的。下面是我在浏览了众多有关WEB性能优化方面的论述后的一个总结,因为内容比较多,而且翻译总结时间比较长点,所以初步打算是逐步逐步共享一下自己的心得,后续的将会陆陆续续推出,说的有不正确的地方,欢迎指正~

因为总结是写在word文档里的,所以就顺便保存了一份pdf格式的文件,需要的童鞋可以自行下载:《WEB性能优化系列一》。

  1. Serve resources from a consistent URL:使用一个确定的URL来引用资源
  2. Serve scaled images:衡量图片的大小缩放
  3. Optimize images:优化图片
  4. 拆分初始化负载
  5. Minify HTML
  6. Minify CSS
  7. Minify JavaScript
  8. Remove unused CSS:删除无用的CSS
  9. Enable compression:允许压缩
  10. Minimize request size:最小化request请求头信息的大小
  11. Serve static content from a cookieless domain:减小静态资源的cookie的大小
  12. Optimize the order of styles and scripts:优化js和css文件的加载顺序

(全文…)

Javascript,CSS Minify

这几天在思索口碑网的CSS Minify的实现方式,询问之后,悟出点原理,示例:

上面的示例中,将三个css文件压缩为一个css文件,减少了两个HTTP请求,性能上确实能提高不少,特别是对于访问量大的页面。但是之前一直在思索两个问题:

  1. 文件名中包含不规则的字符,在windows操作系统下是不允许作为文件名的。
  2. 浏览器的缓存怎么处理。

通过一些时间摸索和跟同事进行探讨,迷雾渐渐清晰了。对于一个问题,服务器端是进行了urlrewrite了,比如上面图示的url链接其实是障眼法,是给别人看是这么个东东(它包含了一些版本和文件名的信息,使用版本号的一个好处就是可以在版本升级的时候可以及时更新缓存,保持更行的css文件的及时生效),其实是服务器端会将它rewrite到另外一个文件里。这个文件是会自动通过参数整合三个css文件到一个css文件里,最后download到客户端。那么对于第二个问题也就好解释了,url不变,浏览器就会从缓存里读取。

问题想清楚了,偶也就开始思索着自己去怎么实现这么个功能,下面是我摸索过程中所想到的办法(经测试,都不太理想):

(全文…)