第二类，传输优化

这类是大头，很烦，首先是字节，字节越小越好，怎么能小下来，最有效的方式就是google的方案，把首页做的极其精简，图片，html，静态文件都很小，再就是缓存，把文件放到本地缓存区读取。还有http请求数，减少文件传输中的排队等待。

字节优化：

1. 减少冗余html，结构化，语义化的html来实现，行为，表现，结构分离，独立的html文件将变得很小。
2. 压缩文本文件，css，html，js去掉注释、空格、换行等。
3. 降低图片字节，选择合适的图片类型，png-8是一个好东西，再用工具将图片进行压缩去掉，比如png-8的压缩工具。用合适的图片尺寸，不要把大图控制一下宽高就用上了。
4. gzip压缩一下，减小服务器端传输到客户端时候的字节。
5. flash文件和flash+xml的动态flash也减小字节

缓存：
服务器端配置一下，提高缓存的命中率和把不经常修改的文件缓存了。
Add Expires headers、Etags、ajax使用get方式便于缓存。
把能分离出来的css，js分离成外部文件便于缓存。
使flash和xml文件可缓存。
打通不同运营商的限制
CDN提高不同类型运营商的网络传输速度，电信，网通，铁通，教育网统统搞定。

请求数：
减少文件请求数，能合并到一起的合并一下，css，js，图片等，减小排队等待和服务器端开销。
分域提高同时加载数，优化排队等待。
避免404无效请求数。
避免重定向。

延迟加载和预载：
把暂时不用的文件等主体页面加载完了再加载，把用户稍后要看浏览的内容预先加载进来，相册浏览就是很好的例子，先用小图片放大再把大图展示出来，看本张图片时把下一张预载进来等等。

第三类：客户端优化

1. 讨厌的IE的滤镜和CSS expressions少用，小心把浏览器搞挂，CUP 100%死机。
2. CSS放到前面，js能放到后面的放在代码后面。将页面尽早展示给用户。
3. 减少iframe的使用，避免CPU扛不住。
4. 减少DOM个数，减低浏览器解析压力。
5. 使用 <link> 而不是@importChoose <link> over @import，在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
6. 提高js的执行效率，话题太大不提了
7. 缩小 Cookie，针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)
8. 还有小图片的repeat背景会提高浏览器的CPU占用。
9. 合理的DOM排序，把重要的内容代码前置，优先加载。

再就是些没对号入座的雅虎性能优化的条目。至此可以检验到页面工程师不是盖的，需要对代码、文件，http协议，缓存，服务器等精准的学习和控制，达到提供用户最最基本的体验——访问速度的体验。

Web标准的分离思想和结构化语义化html促成了以上很多条的实施，这是美工时代所不能比拟的。

有什么不对和补充的，欢迎回帖提示。

经典论坛交流：
http://bbs.blueidea.com/thread-2952618-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/7204.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 悟道web标准:前端性能优化 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。