Add to favorites 引言：在当今这样的信息时代，不管是互联网平台，还是大型客户项目，对于WEB站点的性能要求都是越来越高，同时，随着移动设备的兴起，不管是PC端，移动端的性能也同样的重要。而且现在前端框架也是层不出穷，其实也能看出来，这些框架不光是为了使用，最重要的还是考虑页面加载和渲染等方面的性能。
博主最近也在优化公司的项目，解决访问加载慢的问题。博主在优化过程中，使用HttpWatch工具来观测页面中的加载时间等，也能从中深入了解HTTP相关知识。在此要感谢雅虎的工程师，经过研究，总结出的黄金法则：“只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上”。
总结下来大致可以从以下几个方面进行优化：
1. 将样式表放在顶部，减少“白屏（Blank White Screen）”现象，尽量使用LINK标签将样式表放在文档HEAD中；2. 将脚本放在底部；3. 减少HTTP请求。图片地图、CSS Sprites、内联图片和脚本，去除没用的脚本和样式表，合并脚本和样式表；（合并的脚本和样式表可以通过版本号来管理，同时也可以解决缓存配置后的更新问题）4. 增加并行下载量；5. 压缩脚本和样式表；6. 优化数据查询接口，减少数据接口响应大小，同时尽量使用GET请求获取数据；7. 服务器优化（使用CDN，添加Expires头，配置ETag等）8. 尽量加载当前使用的资源，比如博主系统中有嵌入地图，在点击使用时再加载，保证首次加载时不会过慢。9. 预缓存，其实就是在使用前，加载所需的资源。可以将一些常用且变更频率较小的资源提前加载缓存起来。
下面就先从性能测试的工具说起，说起性能的测试工具，常用的有HttpWatch，Firebug和YSlow等。在这里就使用HttpWatch来瞧瞧吧。
一、HttpWatch工具简介及其HTTP视图
就拿百度首页来说吧。先安装HttpWatch（具体安装这里就不介绍了），在IE工具中就会出现HttpWatch工具。
打开百度，如果想分析这个页面，点击工具中HttpWatch，再点击“Record”，刷新页面即可，如下图：
合起来可以看到总的概况，如有多少请求等：
点击内部的每个HTTP请求，可以看到每个HTTP中的阶段：
如上图中，右下角中，就能看到这个请求的每个阶段所花费的时间。
下面收集了一些相关的名词解释，请参考：
| 时间片段名称 | 意思 |
| Blocked （阻塞） 灰色 |
阻塞的时间主要包括，预处理时间，（如缓存查找）和网络排队等待的时间，导致阻塞最主要的原因是下载页面中的图片 |
| DNS Lookup(域名解释） 紫色 |
域名解释时间主要是主机名转化为相应的ip地址的时间，在访问URL地址时，地址本身不能被直接访问，需要将它对应为相应的ip地址才能访问， |
| connect（连接） 黄色 |
链接时间是指与web服务器（或代理服务器）建立起来的tcp链接需要时间，一个安全的HTTPS连接应该包含SSL握手的过程，让系统处于一种保持状态，他可以节约重复创建tcp链接的时间。 |
| send(发送） 绿色 |
发送时间指从客户端发送HTTP请求道服务器所耗费的时间，并且发送数据太小会影响发送时间，如上传文件花费的时间就会比较长 |
| wait（等待） 红色 |
等待时间是指服务器响应请求的时间，这个指网络延迟和服务器请求所花费的时间 |
| receive（接受） 黑色 |
接受时间是指从服务器返回数据到客户端所花费的时间，这个时间受返回消息内容大小、网络宽带和http压缩比的影响 |
| cache Read（读cache) 蓝色 |
读缓存时间是指从浏览器缓存中读取内容的时间 |
以上列出的是做优化需要了解，也是比较常见的。
参考资料：
当然除了这些时间片的参考，通常优化的时候，我们还需要关注HTTP请求的 Header和Cache等部分，因为缓存的处理也是优化中提高性能关键之一，下面的章节将介绍。
使用HttpWatch工具，是为了就当前网站所有的请求进行统一分析，从而进行优化。
二、性能优化知识储备
1. 熟悉HTTP请求。2. 各浏览器中的并行下载量。3. 理解WEB性能优化黄金法则。4. 熟悉脚本和样式表。5. 使用相关优化工具。6. 服务端HTTP优化配置。
三、分析网站
现象：网站中加载页面是，首先会有等待过程（也就是上面提到的“白屏”现象），等待样式表和脚本加载进来之后，渲染页面也有几秒的时间。
分析页面的信息：
1. 样式表8个左右，
2. JS脚本15个左右，
3. 数据请求5个左右。
着手分析：
1. CSS和JS加载过程中，过多的资源被阻塞，等待时间较长；
2. 脚本和样式表数量过多；
3. 数据请求响应过长，即数据量过大。
四、优化实践
在HttpWatch中，有DOM LOAD和PAGE LOAD之分，DOM LOAD即加载DOM节点，PAGE LOAD就是根据CSS和JS等渲染页面的过程。
针对这两个过程，在DOM LOAD过程中，咱们需要优化的是资源加载速度，和提高并行下载量等；在PAGE LOAD过程中，咱们需要优化的是数据请求和DOM节点渲染的效率。
根据上述的总结：
第一步：
我们的页面首先一定要保证“将样式表放在顶部和将脚本放在底部”，这样肯定能减少很多阻塞现象的发生，有明显的效果。
第二步：
减少HTTP请求，使用图片地图、CSS Sprites、内联图片和脚本、脚本和样式表的合并。其中图片地图和CSS Sprites等这里就不介绍了，下面主要介绍一下脚本和样式表的合并。目前已经有很多相关的工具，博主推荐使用YUI Compressor。如果压缩JS，博主觉得JSMin也很不错。当然项目内部都有两种脚本和样式表，“UI框架的CSS和JS（如使用BootStrap等UI框架）”和“企业自己设计的CSS和开发的JS”，博主是将UI框架的相关CSS和JS进行了合并和压缩，企业自己开发的CSS和JS，进行合并和压缩，但需要做好版本的控制。（1）由于UI框架相关的CSS和JS，很少有变动，所以肯定要实现缓存；（2）企业自己开发的CSS和JS合并压缩后，肯定也是要做缓存的，如果不做缓存，每次都要加载，肯定是要慢的。问题来了，如果做了缓存，企业开发变更之后，如何让浏览器知道已经更新了脚本呢？这时，版本号就能体现其目的了，合并压缩后的CSS和JS，使用新的版本号，自然浏览器中找不到缓存，需要重新加载。目前很多大型网站是这样做的，使用动态的版本号来控制，确实能达到很好的效果。结果：样式表减少至4个左右；脚本减少至5个左右。加载速度明显变快，时间能减少20%~30%。根据HttpWatch显示，资源阻塞（等待）现象明显减少，总的资源变小了。
第三步：
优化数据查询接口。优化接口方面一般就是优化后台程序了。大致可以从如下几个方面进行优化，“创建数据库索引”、“优化SQL语句”和“减少返回数据的响应大小”等。另外，对于GET和POST的效率，根据下面参考资料：GET100次平均耗时323ms；POST100次平均耗时589ms，所以POST方式是比GET慢的，但POST请求的优点是安全，并且参数没有长度限制。是选择POST还是选择GET，皆需要处理，避免截断url，或者处处POST。所以获取数据时，尽量使用GET请求，设计敏感数据或保存操作等使用POST。
第四步：
检查页面中是否有可以延迟加载或者等待用户触发加载的资源，比如使用iframe或jQuery load加载页面等。博主的系统中，使用了iframe，是为了嵌入地图，增加地址的功能。改善的做法是，在页面中使用的iframe，不指定src属性，在页面DOM节点加载完成之后，即在onload事件中或者在用户操作之前设置上iframe的src属性，待用户触发时加载其中的资源。
第五步：
服务器优化（配置Expires和ETag等），增加二级域名（多节点）提高资源并行下载。博主系统由于多服务器多节点的关系，同时使用了IBM HttpServer和Nginx，具体的配置这里就不说了，相关设置也不复杂。在优化的过程中，为了提高并行下载，研究了当前流量较大的百度和京东。在其中不难看出，他们都使用多服务节点以及二级域名，对于图片、样式表和脚本做不同的配置处理。其实这个一方面是针对浏览器的并行限制做的处理，同时也类似CDN优化，减少访问路由。博主这边，多建了一个二级域名，根据浏览器的并行下载限制，尽量让所有资源能够并行下载。
第六步：
做“预缓存”处理。乍一看，是不是觉得很高端呢，哈哈。其实这算是一种投机取巧的方法吧，但效果确实没有辱没这个高端的词。这里的“预缓存”，不涉及服务器缓存和代理服务器等，只是浏览器中的缓存处理。主要操作是，提前在资源较少的页面提前加载资源，便于后面较多资源的页面使用缓存。如下场景：一个登录页面（需要加载的资源较少，一个登录的CSS和一个处理登陆的JS），一个首页（登录后的页面）。首页中需要加载很多组件和样式表。此时，我们在登录页面将首页中的一些时间较长的资源提前加载，当然加载的方式有很多，如果不影响登录页面的效率的话，直接使用<style>或者<script>外联即可，如果影响效果，可以使用window的onload事件，动态创建节点进行加载。这样加载首页的时候，就能节省很多时间了。
如有问题，欢迎指出；如需转载，请标明出处，谢谢！
参考资料：