一次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整合了，這方面合併後應該還會有所提高。