前端性能优化

一、 前端性能黄金法则：
只有10%-20%的最终用户响应时间是花在了下载HTML源文件上。其他80%-90%是花在了下载页面中的所有组件上。 80%-90%用户的等待时间是来自于前端的页面加载
二、时间花在哪？
Blocked：包括所有预处理（查询本地Cache）时间和等待网络连接可用的时间
DNS Lookup：域名解析。查询过程：浏览器DNS缓存；操作系统DNS缓存；DNS服务器。
Connect：创建一个 TCP 连接到 web 服务器 （或代理） 所需的时间。如果正在使用安全的 HTTPS 连接这次包括 SSL 握手过程。
Send：HTTP 请求消息发送到服务器所需的时间，将取决于发送到服务器的数据量。
Wait：等待来自服务器的响应消息。此值包括由于采用网络延迟的延误和处理该请求的 web 服务器上所需的时间。
Receive：从服务器读取响应消息所需的时间。此值将取决于内容返回，网络带宽的大小和是否使用 HTTP 压缩了。
Cache Read：读取浏览器缓存中的内容或 304 响应所需的时间。
TTFB：（Time To First Byte）从初始的网络请求正在发起由浏览器从服务器接收的第一个字节的持续时间。它包括 TCP 连接时间、 将请求发送时间和获取响应消息的第一个字节的时间。
Network：所有的网络相关的 HTTP 请求的总持续时间。
三、优化方向
Blocked：增加expires头，配置Etag 参考：expires与etag控制页面缓存的优先级
DNS Lookup：减少DNS查询，2个域名要优于1个和4个域名(yahoo)参考： 网站加速最佳实践 –减少DNS查找
Connect：Connect:keep-alive ； CDN
Send：将图片，js，css独立服务器，避免每次请求中带Cookie；Cookie domain尽量使用子域名；尽量使用GET方式请求。
Wait：服务器缓存；生成静态页面；服务器负载均衡；重定向；SQL语句优化；SQL索引等服务器后端处理速度。
Receive：带宽；Gzip；Html/Js/Css压缩；Js混淆；Image Map；降低图片质量；精简HTMl等
如何减少Http请求次数：
合并js文件；合并css文件；css sprites；image地图；将图片编码成base64数据嵌入网页
如何减少阻塞次数、减少阻塞时间
将css放在顶部；将js放在底部；删除重复的脚本；延迟加载熏染页面不需要的脚本；按需异步下载脚本
四、相关工具——监控工具：
IE FireFox Chrome
IE Developer Tools Firebug Chrome Developer Tools
Httpwatch Speed Tracer
Fiddler - -
五、 相关工具——分析（提供优化）
YSlow；PageCheck性能检测工具；百度统计；page speed