一次WEB前端优化尝试

         今天对本身作的项目中的一个设计器界面加载速度上进行了优化，由于页面在加载的时候，感受有点慢。首先，我用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>ExpiresFilter</filter-name>
       <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
       <init-param>
          <param-name>ExpiresByType image</param-name>
          <param-value>access plus 10 minutes</param-value>
       </init-param>
       <init-param>
          <param-name>ExpiresByType text/css</param-name>
          <param-value>access plus 10 minutes</param-value>
       </init-param>
       <init-param>
          <param-name>ExpiresByType application/javascript</param-name>
          <param-value>access plus 10 minutes</param-value>
       </init-param>
    </filter>
    <filter-mapping>
       <filter-name>ExpiresFilter</filter-name>
       <url-pattern>/*</url-pattern>
       <dispatcher>REQUEST</dispatcher>
    </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整合了，这方面合并后应该还会有所提高。