今日阅读了《高性能网站建设指南》一书,该书的作者Steve Souders"为Yahoo!的开发团队构建了YSlow"。YSlow是Web页面性能分析工具,可以集成至Firebug,非常好用。书和工具是配套的,工具会在线更新,书印出来就不会再变了,因此,不难理解为什么这本书中提出了15条规则,工具已经是23条规则了。突然想到的是,既然工具已经做得这么好了,出新书怕是没人买了吧?无论怎样,还是要感谢Steve Souders的分享,也祝福他能够财源广进。
23条规则都在这里了:
- Minimize HTTP Requests(最小化HTTP请求次数)
- Use a Content Delivery Network(使用CDN加速)
- Avoid empty src or href(不要写src=""这样的代码)
- Add an Expires or a Cache-Control Header(设置缓存)
- Gzip Components(Gzip压缩)
- Put StyleSheets at the Top(CSS放在头部)
- Put Scripts at the Bottom(Script放在底部)
- Avoid CSS Expressions(避免使用CSS的表达式功能)
- Make JavaScript and CSS External(使用js和css文件)
- Reduce DNS Lookups(减少DNS寻址次数)
- Minify JavaScript and CSS(减小js和css的体积,例如去掉不必要的空格、换行和注释)
- Avoid Redirects(避免重定向)
- Remove Duplicate Scripts(避免重复导入同一个js文件)
- Configure ETags(配置或关闭ETags)
- Make AJAX Cacheable(AJAX也可以缓存)
- Use GET for AJAX Requests(AJAX请求中优先使用GET方法)
- Reduce the Number of DOM Elements(减少DOM元素的个数)
- No 404s(友好的错误提示会加大服务器资源开销,最好别出现)
- Reduce Cookie Size(Cookie小一点比较好)
- Use Cookie-Free Domains for Components(分离静态文件,禁用Cookie)
- Avoid Filters(不要使用滤镜)
- Do Not Scale Images in HTML(不要缩放图片)
- Make favicon.ico Small and Cacheable(缩小favicon.ico文件,配置成能缓存)
Yahoo!是大公司大网站。绝大多数情况下我们都是在经营或维护着中小网站,这23条规则是没有必要全部招呼上的;再就是Yahoo!也不是万能的,仅仅这23条规则未必够用。
我觉得前端优化总体而言是设计网站时要尽量把带宽用于传输有价值的内容、用于有意义的交互,再有就是要考虑人性的特点,例如正在传输图片时是不是可以先将文字部分显示出来?
不良的设计可以轻易的吃掉调优的成果,例如,尽管Gzip能压缩掉70%,但是也许还不如设计师少用一个图片节约得多呢。又如,可能好不容易响应时间2s以下了,javascript还能循环几次呢?
最后想说的是,一个好的产品或应用,无论是前端还是后台,都应该遵循"减少无意义的计算,增加人性化的计算"的基本原则。优化不必追求极限,用户满意就好。
本文转自 hexiaini235 51CTO博客,原文链接:http://blog.51cto.com/idata/1129448,如需转载请自行联系原作者