High Performance Web Sites

Foreword 是 YUI – Yahoo! User Interface 的Nate Koechley 写的,提到网站的时间 其实是前端 80%,而后端(我们认为的php+mysql之类的)才只有20%,所以注意前端的设计对网站提速是很有帮助的。

而小网站对于这个应该是没有多大用处的,不过大的网站这个就差别很大了,记得一本介绍CSS的书里面说 AOL还是哪个美国门户网站改TABLE格式为DIV+CSS ,每年节省的流量费用有几百万元,不知道真假,不过你简单算算是有可能的,如果平均每个页面介绍 20KB,那么实际流量是20X8=160Kb 那么 每天如果有1000万次的访问,那么介绍的带宽真的不得了。

原则一:减少HTTPS请求,所有LOGO一张图片,所有JS一个文件,所有CSS一个文件。

CSS Sprites 一张图片总比多张图片好,因为少了n-1次HTTP请求,其实N张图片分割的大小 = 1张大图片的大小,这个和当年用PS拼命割图为了让图片一张张的出来,而不要等很久出来的原理又有不一样了。

data:内联图片模式只有firefox支持,IE这个笨蛋居然又不支持,所以在中国只有2.5%的人用firefox就不用考虑了,但是国外超过25%的人在使用firefox 这个就很有价值了。

看看Macacus B/S 做到1/3的开发量 已经用了7个js 3个css和 和google的1个js 和1个css比有点汗颜,还好我做的intranet用的东西。不过这个对于品酷将来的PIS3 还是有价值的。

原则二:采用CDN加速,这个倒是出钱就能搞定的事情,其实自己也可以做CDN加速,起码我在edong的时候就搞出了一套起码BETA的CDN加速系统了。可惜当时动作完了,没有靠那个赚到第一桶金。

原则三:Expires 图片 样式表 js,好像通过http cache control 可以实现,php5 杜江的书里面我记得有提到,明天去看看,cache看来是重要啊,smarty有,mysql有 不过这都比不过浏览器自身的缓存来的快也节省空间。

原则四:apache gzip压缩html文档和js css文档,可以节省60%。不过这个好像要服务器段处理。

原则五:CSS ON TOP ,css文件不用@import方式 而只用原始的 link方式,这样可以减少白屏方式。

原则六:js要放到页面底部,这个和很多书里讲的不一样不过考虑这个书是为了超大访问量的网站用的所以目前暂不考虑使用了。

原则七:不要用css表达式,这个我到还没有搞清楚怎么去用,并且好像浏览器不是所有都支持的。

原则八:内联css 和 js 理论比外联js 和css快,但是没有了缓存所以还是不建议用,动态加载内联?有点晕。

原则九:延长DNS 更新的时间,TTL值可以是一天,不过突然服务器宕机或者换IP就有点晕了哦。不过macacus看来是用不到的,内网都是IP访问的。

原则十:Minification 精简js ,这个容易理解,去掉所有的换行之类的,就像jquery.js 使用模式。Dojo Compressor 和 JSmin工具,不知道aptana是不是直接有精简工具啊。

原则十一:页面重定向不要用,也就是meta refresh这个技术,这个是属于我比较喜欢用的,呵呵,不过一般都是用来定时跳转用的。目录后必须记得加/.

原则十二:减少重复脚本,这个概率应该不大,不过如果我有十几个js 每个js都有上百个函数的时候估计有可能的。

原则十三:Etag是什么东西?跳开。

原则十四:Ajax缓存,没有看懂写的什么,不过jquery好像就有cache一说,不过好像没有ajax缓存的内容。

Comments (2)

百鬼November 4th, 2008 at 11:23 pm

恩,最近的一个项目,设计的复杂程度对网站效率的影响是至关重要的!好的设计师除了交互,配色,图形,以外可能更多的要考虑整体的执行效率,当然,在国内这种要求是不切实际的。

hatoyuNovember 5th, 2008 at 11:05 am

不过一些小的细节还是可以注意的,开发版和最后上线的版本可以有所调整。