今天对自己做的项目中的一个设计器界面加载速度上进行了优化，因为页面在加载的时候，感觉有点慢。首先，我用firefox的yslow和chrome的pagespeed进行了测试，效果如下，分数有点不同，但是都是很低的。我其实主要在chrome下用pagespeed的提示进行优化的。
yslow优化前：
yslow优化后：
pagespeed优化前：
pagespeed优化后：
优化策略：
1.tomcat配置启用gzip压缩
2.tomcat配置静态文件的过期时间
3.css放页面上方
4.javascript放页面下方
5.css和js文件分别合并、压缩
tomcat启用gzip压缩
打开tomcat的conf目录下的server.xml文件，修改如下
connector port=80 protocol=http/1.1 connectiontimeout=20000 redirectport=8443 executor=tomcatthreadpool uriencoding=utf-8 compression=on compressionminsize=50 nocompressionuseragents=gozilla, traviata compressablemimetype=text/html,text/xml,text/javascript,text/css,text/plain />
参考链接：http://blog.csdn.net/hbcui1984/article/details/5666327
tomcat配置静态文件过期时间
打开tomcat的conf目录下的web.xml文件，增加如下：
filter> filter-name>expiresfilterfilter-name> filter-class>org.apache.catalina.filters.expiresfilterfilter-class> init-param> param-name>expiresbytype imageparam-name> param-value>access plus 10 minutesparam-value> init-param> init-param> param-name>expiresbytype text/cssparam-name> param-value>access plus 10 minutesparam-value> init-param> init-param> param-name>expiresbytype application/javascriptparam-name> param-value>access plus 10 minutesparam-value> init-param> filter> filter-mapping> filter-name>expiresfilterfilter-name> url-pattern>/*url-pattern> dispatcher>requestdispatcher> filter-mapping>
过期时间：每次请求增加十分钟
参考链接：https://tomcat.apache.org/tomcat-7.0-doc/api/org/apache/catalina/filters/expiresfilter.html
css文件合并压缩，js文件合并压缩
合并压缩使用grunt进行处理，简单方便
参考链接：http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
http://www.cnblogs.com/snandy/archive/2013/05/20/3088613.html
总体来说，页面加载速度有所提升，因页面设计器中，各个组件的js和核心js加起来有30多个，我只针对这方面进行了压缩合并，其他引入的js插件都是使用的压缩后的；css方面我也只压缩合并的我自己增加的文件。图片方面没有把所有图片都合并到一个文件中，只有少部分icon整合了，这方面合并后应该还会有所提升。