悟道web规范:前端功能优化

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

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

引用:

落后的页面工程师系统，美工代劳的页面代码，唯独IE才干阅读的页面代码，不需要写代码用图形东西直接导出的页面代码，很多的流量耗费的页面代码，速度慢的像蜗牛的页面代码，程序员看到就头大发麻的页面代码，每次改版修正都要打动干戈，重复产生的页面代码，一种让页面工程师和民工相同的页面代码。

我们当然要革新它，替代他，发明全新的页面工程师系统和页面质量，独立的页面工程师完结的页面代码，跨过渠道的页面代码，只要能解析页面的设备都能够拜访和阅读，手写的页面代码，整齐划一，层次分明，最低流量耗费的页面代码，程序员喜欢的页面代码，拜访速度超快的页面代码，改版可重复利用的页面代码，让页面工程师抬起头来，自豪的称自己是工程师，书写的也是计算机代码的页面代码。
前端优化正好给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. 运用而不是@importChooseover @import，在 IE 中 @import 指令等同于把 link 符号写在 HTML 的底部。而这与第一条相违背。
6. 进步js的履行效率，论题太大不提了
7. 缩小 Cookie，针对 Web 组件运用域名无关性的 Cookie (Use Cookie-free Domains for Components)
8. 还有小图片的repeat布景会进步阅读器的CPU占用。
9. 合理的DOM排序，把重要的内容代码前置，优先加载。

再便是些没对号入座的yahoo功能优化的条目。至此能够查验到页面工程师不是盖的，需要对代码、文件，http协议，缓存，服务器等精准的学习和操控，达到供给用户最最根本的体会——拜访速度的体会。

Web规范的别离思想和结构化语义化html促成了以上很多条的施行，这是美工年代所不能比拟的。