### 用户响应时间花在哪里了？### 事实上，在绝大部分的网站中用户操作的响应时间10~20%消耗在web服务端，80~90%消耗在从web服务器获取HTML文档并传送到浏览器。为了研究这一点，我们拿个网站实战分析一下。我随机抽取Alexa国内排名前十网站中的天猫首页来说明。
从图中可以看中www.tmall.com的document从发起请求、等待响应、到下载完成只用了不到200ms（更加准确的说，我通过工具估算大概是171ms）。红线位置是页面内容请求完毕的时间，所有资源包括document，请求document中的样式表单，脚本，图片，字体等等资源的加载时间以及脚本的解析时间和样式的渲染时间不到1500ms（同样，更加准确的说是1416ms）。现在我们可以计算出document的下载时间占了总体下载时间的12%。
这只是未缓存的情况。浏览器在第一次访问页面时，会缓存样式表单，脚本，图片，字体等资源，在下次访问请求web服务器的这些资源时会判断是否有修改，如果没有则从缓存中读取，这样会节省资源下载的时间。Tips：这就是我们通常在访问网站加载很久，加载出来时页面“畸形”，刷新一下往往页面就正常打开了，因为第一次缓存了一部分内容，下次就少下载了很多资源。
我们来看看缓存后页面响应情况
同样，用上面的计算方法我们可以得出document下载的时间占总体下载时间的30%；
图中status为304的就是请求web服务器得到的未修改的资源。有一部分内容虽然缓存了，但是仍然从web服务器获取，如图中的脚本和样式表单，因为他是带条件的http请求，部分gif和png图片，往往是广告和新闻图片，他们要实时性要求高，做了特殊处理，时时获取，被缓存了怎么行呢？。
另外，我们可以看到很多请求都是并发的请求，js除外，因为js请求是阻塞的。index.js、tmall.js、aplus_v2.js在加载后有一大段空白，这就是解析他们所用的时间。我们看不出服务端占用了太长时间。 可以看出，网站下载的时间大部分用在了document中的组件和资源的下载上。
不仅仅是天猫网站日如此，Alexa排名前十的国内网站都能印证这个结论。
1、后端响应时间占整体响应时间的10%~20%左右，前端响应的时间占80%~90%。优化前端性能给整体带来的效益更高。
2、后端优化成本高，前端优化成本低。后端优化往往是sql上的性能精简，代码重构性能优化，架构上的调整，如此，难度往往很大，投入的时间精力也很多，但是给整体响应带来的效益不高，就算做到极限，也只能提高10%~20%的响应速度。前端需要改动量少，压缩资源，减少http请求等等，带来的效益很高，假如提高一半就能提高40%~45%的响应速度。
3、前端性能调整已被证明是可行的。转自Nate Koechley。
我也在研究和学习中，如果有错误欢迎纠正，可反馈至我的邮箱yitalalww@gmail.com
