前些天我们经理拿给我一本书,让我看看,《高性能网站建设指南》,前端工程师技能精髓,两个晚上,翻完啦。周末,写一下读书笔记,便于以后用到的时候查阅。
总共讲了14个规则,最后一张简要分析十大网站。
作为一个web开发人员,我觉得了解常用的几个规则就可以了:
规则1:减少http请求。
1.1csssprite
使用情况:页面中导航中多个图标,可以把图标集中到一个图片上,这样就又原来的多个图片的http请求,变成一个。当然多个图片合成为一个图片,在第一次加载的时候,可能没有多个小图快,但是整体来看,这样合成后的,效果大于分开的小图。(很实用)
2.合并脚本和样式表
理想情况下,一个页面上,脚本和样式表都是一个。所以,脚本的合并,样式表的合并同样能够减少http请求。
规则2:使用cdn
(和我们相关性不大),这是网管的问题和公司的问题,而且成本是很大的。貌似博客园,最近也在用cdn来提高网站的访问速度。
规则3:添加expires头
把页面哪些图片,css,js等设置expire,当页面再次发送请求,直接从缓存中取出来。
规则4:压缩组件
浏览器通过Content-Encoding头来通知web客户端,gzip是目前流行和有效的压缩方法。但是,会导致服务器花费额外的cpu周期。
规则5:将样式表放在页面顶部
这个不用多说啦,基本上都是这样做的。
规则6:将脚本放在底部
我们一般也是习惯于放在页面的顶部,但是为了避免脚本阻塞下载,还是改变一下传统的那种方式,放到页面底部规则7:避免css表达式
我用到的css表达式,就是png图片透明的时候,虽然可以通过js解决,但是还是习惯于用css表达式,但这里是不合适的。因为所谓的求值和判断,当页面滚动,鼠标移动的时候都要求值。
规则8:
使用外部js和css
习惯于这样用,相比于内联来说,外部的js和css可能被缓存,所以,相对快点。
加载后下载:
动态内联:利用cookie是否存在来判断。不存在,表示是第一次加载。
规则9:
减少dns查找
通过使用keep—alive和较少的域名较少dns查找。
规则10:
精简js
推荐JSmin工具
Dojocompressor(ShrinkSafe,)
精简css,利用css压缩工具处理空格,前提是先把自己的css相同的类合并,同时移除不必要的类。
规则11:
避免重定向
缺少结尾的斜线,导致重定向是很多web服务器默认的行为,所以,所以要谨慎。
规则12:
移除重复的脚本
同样可以功能可能采用不同的js,但是尽量是想js的公用,对页面中用到的js进行检查和合并,对于团队开发特别重要。确保脚本只是被包含一次。
规则13
配置Etag(不太理解)
定义:实体标签,是web服务器和浏览器用于确认缓存组件的有效性的一种机制。
规则14:
使ajax缓存
推荐几个常用的页面优化工具:
httpwatcher:具体用法总结的很全面。
更多网站优化的内容参考:
http://www.cnblogs.com/yslow/archive/2009/04/24/1442722.html