这20条新实践出了有一段时间了。但昨天Baidu了一下,也没有找到几条记录,仅有的几条也只是简单的把20条干巴巴一列就完了。我觉得不是太好。好的东西要让大家都感觉到、都能会用才算是达到了目的。今年第五期《程序员》上刊登了比较详细的内容,有兴趣的朋友可以一看。买不到的朋友也不要着急,我会把它们列出来,并给出了原版 Flash。
Stoyan Stefanov 三月出席了位于加拿大蒙特得尔的 “PHP魁北克会议”。其讲座内容就是 Yahoo! 的最新研究成果和性能方面的突破。含盖了早已存在的14条规则,又加上了这新的20条规则。Yahoo! 将这些优化归结为服务器、内容、Cookie、JavaScript、CSS、图片和移动七个部分。
这些规则如下:
1. [服务器] Flush the buffer early (尽早释放缓冲区)
将文件头先发送出去,然后再发送文件内容:
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
2. [服务器] Use GET for AJAX requests (AJAX 请求使用“GET”方法)
Get 方法和服务器只有一次交互,而 Post 要两次。
3. [内容] Post-load components (延迟加载组件)
分清什么是必须最先加载的,其余的后加载。
4. [内容] Preload components (预加载组件)
无条件预加载 (参阅 Google 的 Sprite 图片加载)、条件预加载 (Google 搜索提示)、预期预加载 (新设计发布时提前加载 JS 等) 三种。
5. [内容] Reduce the number of DOM elements (减少 DOM 元素的数量)
Yahoo! 主页有700个, 大约。
6. [内容] Split components across domains (跨域分离组件)
不超过2 - 4个域名。太多的话会消耗太多 DNS 寻址时间。
7. [内容] Minimize the number of iframes (减少 iframes 的数量)
有效利用 ifames。
iframe 优点:
- 有利于广告等第三方内容
- 是个安全的盒子 (sandbox)
- 并行下载脚本
iframe 缺点:
- 即使为空,也会付出成本
- 会阻止页面的 onload
- 非语义
8. [内容] No 404s (不要出现 404)
有损用户体验。
9. [Cookie] Reduce cookie size (降低 cookie 的大小)
降低对用户的相应时间。
- 消除不必要的 Cookie
- 让 Cookie 尽可能小
- 在设定 Cookie 的域范围时要清醒,尽量避免其对其它子域的影响
- 合理设定过期日期
10. [Cookie] Use cookie-free domains for components (不要在组件中限定 cookie 的域)
对图片等组件的请求没有必要发送关于域名的 Cookie。
如果你有一个 www.example.org 域名,你可以用 static.example.org 存放静态组件。但如果你已经在 Cookie 中设了顶级域 example.org,而不是 www.example.org,那么所有对 static.example.org 的请求都会附带域 Cookie。这时,你可以买一个新域名来存放所有的静态组件。 Yahoo! 用的是 yimg.com, Youtube 用的是 ytimg.com, ...
这样做还有一个好处就是有些代理会拒绝缓存带有 Cookie 请求的组件。
因此,在 Cookie 中存放域的时候,最好在 example.org 前加个 www。
11. [JavaScript] Minimize DOM access (减少访问 DOM 的次数)
JS 访问 DOM 慢。用缓存、异步传输 (线下更新结点,然后加入 DOM 中),不要用JS修复页面布局。
12. [JavaScript] Develop smart event handlers (开发灵活的事件处理句柄)
对合适的标签用 JS。不必等全部加载完标签、图片等。YUI 事件工具有一个 onAvailable 方法。
13. [CSS] Choose <link> over @import (优先使用 <link> 而非 @import)
IE 的 @import 就和在页面底部用 <link> 一样。
14. [CSS] Avoid filters (避免使用过渡器)
不要在 IE 中使用 AlphaImageLoade 过滤。一是它仅对IE6--适用;二是用此属性的图片下载时,浏览器会阻止其显示并冻结浏览器;三是它会增加内存消耗,并且是随 每个元素增长的,而非每张图片。
解决方法是用 PNG8 图片代替。如果已经用了,就加一个 _filter 以免影响 IE7+ 用户。
15. [图片] Optimize images (优化图片)
用一些工具检查你的图片。如把 gif 转成 png 看是不是可以使图片变小,大多数情况下是可以的。
一些有用的命令:
identify -verbose image.gif convert image.gif image.png pngcrush image.png -rem alla -reduce -brute result.png
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
16. [图片] Optimize CSS sprites (优化 CSS sprites)
竖排图片等等。
17. [图片] Don't scale images in HTML (不要在 HTML 中限制图片大小)
需要多大的图就用多大的图。不要用 <img width="***" height="***" ... />
18. [图片] Make favicon.ico small and cacheable (降低 favicon.ico 的大小并缓存)
小于1K更好,并将缓存时间设得尽可能长 (几个月或更长,如果你不常换 Logo 的话)。
19. [移动] Keep components under 25K (保持组件大小在 25K 以下)
此限制是基于 iPhone 不能缓存大于 25K 的组件 (图片等)。注:该大小为压缩前的大小。
20. [移动] Pack components into a multipart document (将组件裹到一个多部分的文档中)
就像发一封带附件的邮件,这样用一个HTTP请求就可以了。(记住,HTTP 请求代价是很高的)。 用此技术的时候,先查一下用户的客户端代理 (Agent) 是否支持它 (iPhone 是不支持的)。
更多内容参见:
http://developer.yahoo.net/blog/archives/2008/03/yahoos_latest_p.html
http://developer.yahoo.com/performance/