悟道web标准:前端性能优化

前端性能优化完全是一个技术话题，但是对于项目的用户体验有非常大的影响，如果你的网站打开要等待三五秒或者等到浏览器提示无法连接，那网站哪来的流量，哪来的品牌影响和用户忠诚度，挣钱就算了。

3s，作为判断一个用户忍受你网站速度的限度，如果超过3s，用户已经对这个网站产生了负面的抵触心理。
前端性能优化和web标准有什么关系，接着第一篇 悟道web标准——统一思想，遵循标准 ，这是对你遵循web标准的一个补偿或者是对标准的一个认可。

引用:

前端性能优化了解yahoo性能优化N条的同学应该不会陌生，安装一个YSlow评分并对照着优化就可以了，但是有没有想过为什么要这么做就可以提升速度，这些与Web标准有没有某种关联或者因果呢。

我把这些个条目分成三类，服务端运算优化，传输优化，客户端运算优化：

第一类，服务器端优化

服务器端就是对你的网站的动态语言的执行(asp,php)，数据库查询，存储等速度，总的来说就是输入/输出的运算。这些跟前端没关系，但是影响着前端。YSlow里面没有，鬼知道你网站的服务器性能如何，看不出来，就自行优化服务器性能，数据库性能，多买点服务器扩容。
yslow有一条尽早刷新 Buffer (Flush the Buffer Early)，貌似是不等html完成生成就传输。
提高域名的DNS解析速度。减少DNS的解析个数。这个不好归类，暂时放到这里吧。

第二类，传输优化

这类是大头，很烦，首先是字节，字节越小越好，怎么能小下来，最有效的方式就是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. 使用 而不是@importChoose 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促成了以上很多条的实施，这是美工时代所不能比拟的。

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