性能优化-WEB篇

由于系统的WEB层直接面向用户，所以在优化中是重中之重，不废话，直接上干货。

1. Minify 资源文件以加快资源下载

Minify资源文件目前有两种方案：

第一种是使用后台语言，例如Google的Closure，YUI的Compressor，它们都可以和Ant完美结合。但是这种方式有一个致命的弱点，就是效率非常慢！一个项目动不动就要半个小时，如果中间遇到压缩错误，需要重新来过，中间的痛苦可谓谁用谁知道。

第二种是使用目前大行其道的Grunt，Grunt基于NodeJS，灵活可配置，效率更是不可同日而语。上面半个小时的时间，Grunt只要2秒！而且Grunt能做到的可不仅仅是这些....

2.合并资源文件

HTTP每次请求都要进行三次握手，消耗性能。所以尽量合并一些常用的JS为一次请求，可以大大提高页面的加载速度。比如JQuery，Fileupload等这些所有页面都需要的类库。

3.CDN加速，CND全称内容分发网络

这个词后面的水很深，我就不详细的讲了

简单来说，浏览器对每个域名有限制并发请求个数，可以使用CDN来消除这方面的限制，另一方面分散各个服务器的压力。

目前国内比较出名的百度静态资源CDN http://cdn.code.baidu.com/，有兴趣可以看一下。

淘宝首页的资源文件加载，N多的域名，代表N多的服务器...

4.Script标签放置页面尾部

这个非常重要，但是最容易被忽视！script标签加载时会Hold住整个页面，导致页面空白。大家可以尝试移动script标签到页面底部，加载显示速度绝对上升。

百度首页，script全都放在了页面底部

5. 模块化JS

JS的不易管理一直为开发人员所诟病，在架构上本身已经是一种挑战，在大型项目中，如果可以模块化JS，本身就受益无穷。在模块化JS后，就可以轻松实现动态加载，受益无穷

模块化JS可以使用RequireJS，SeaJS等相关框架

6.缓存

前台缓存在现在的开发中已经无处不在，加之HTML5 Storage，IndexedDB的盛行，将来更多的数据可以缓存在前台。浏览器自带的缓存机制不太合理，所以建议搭配后台处理。

浏览器在缓存文件时，是以请求的URL为主键的。我们可以在每个资源文件的请求中，加上系统的版本号，并在Server端filter相关的请求，设置资源永不失效。

这样在系统升级时，不再需要用户清除页面缓存，也可以灵活的管理资源文件。

Spring的mvc-resource是这方面的经典案例

百度的JQuery文件在本地缓存180天。

7. 告诉用户，需要等待多久...

这个就不用多说，页面多加一些小菊花，用户就不觉得慢了。

很多ProgressBar都只只提供样式，而不提供逻辑。

这里推荐两款非常好用的Progressbar：Pace.js以及ProgressBar.js ，加入页面，自动监控页面请求，显示进度。非常好用。

前六条都是通过各种方式提升系统的吞吐量和并发量，来达到优化的效果。这些方式都是很粗放简单的，有兴趣可以直接在系统中尝试一下。

很多读者独到这里，不免要问，这些我都做了，如何验证我优化的效果呢？

如果你的系统是在线上，可以使用WebPageTest来检验你的系统，它会告诉你性能的瓶颈在哪里

如果你的系统是线下，可以使用Chrome Develop Tool来检验。

下一篇，将讲解Server端的优化，内容涉及缓存，并发，数据库访问等内容，敬请期待。

如果您有兴趣，请关注我的微信公众号，谢谢。

由于系统的WEB层直接面向用户，所以在优化中是重中之重，不废话，直接上干货。

1. Minify 资源文件以加快资源下载

Minify资源文件目前有两种方案：

第一种是使用后台语言，例如Google的Closure，YUI的Compressor，它们都可以和Ant完美结合。但是这种方式有一个致命的弱点，就是效率非常慢！一个项目动不动就要半个小时，如果中间遇到压缩错误，需要重新来过，中间的痛苦可谓谁用谁知道。

第二种是使用目前大行其道的Grunt，Grunt基于NodeJS，灵活可配置，效率更是不可同日而语。上面半个小时的时间，Grunt只要2秒！而且Grunt能做到的可不仅仅是这些....

2.合并资源文件

HTTP每次请求都要进行三次握手，消耗性能。所以尽量合并一些常用的JS为一次请求，可以大大提高页面的加载速度。比如JQuery，Fileupload等这些所有页面都需要的类库。

3.CDN加速，CND全称内容分发网络

这个词后面的水很深，我就不详细的讲了

简单来说，浏览器对每个域名有限制并发请求个数，可以使用CDN来消除这方面的限制，另一方面分散各个服务器的压力。

目前国内比较出名的百度静态资源CDN http://cdn.code.baidu.com/，有兴趣可以看一下。

淘宝首页的资源文件加载，N多的域名，代表N多的服务器...

4.Script标签放置页面尾部

这个非常重要，但是最容易被忽视！script标签加载时会Hold住整个页面，导致页面空白。大家可以尝试移动script标签到页面底部，加载显示速度绝对上升。

百度首页，script全都放在了页面底部

5. 模块化JS

JS的不易管理一直为开发人员所诟病，在架构上本身已经是一种挑战，在大型项目中，如果可以模块化JS，本身就受益无穷。在模块化JS后，就可以轻松实现动态加载，受益无穷

模块化JS可以使用RequireJS，SeaJS等相关框架

6.缓存

前台缓存在现在的开发中已经无处不在，加之HTML5 Storage，IndexedDB的盛行，将来更多的数据可以缓存在前台。浏览器自带的缓存机制不太合理，所以建议搭配后台处理。

浏览器在缓存文件时，是以请求的URL为主键的。我们可以在每个资源文件的请求中，加上系统的版本号，并在Server端filter相关的请求，设置资源永不失效。

这样在系统升级时，不再需要用户清除页面缓存，也可以灵活的管理资源文件。

Spring的mvc-resource是这方面的经典案例

百度的JQuery文件在本地缓存180天。

7. 告诉用户，需要等待多久...

这个就不用多说，页面多加一些小菊花，用户就不觉得慢了。

很多ProgressBar都只只提供样式，而不提供逻辑。

这里推荐两款非常好用的Progressbar：Pace.js以及ProgressBar.js ，加入页面，自动监控页面请求，显示进度。非常好用。

前六条都是通过各种方式提升系统的吞吐量和并发量，来达到优化的效果。这些方式都是很粗放简单的，有兴趣可以直接在系统中尝试一下。

很多读者独到这里，不免要问，这些我都做了，如何验证我优化的效果呢？

如果你的系统是在线上，可以使用WebPageTest来检验你的系统，它会告诉你性能的瓶颈在哪里

如果你的系统是线下，可以使用Chrome Develop Tool来检验。

下一篇，将讲解Server端的优化，内容涉及缓存，并发，数据库访问等内容，敬请期待。

如果您有兴趣，请关注我的微信公众号，谢谢。