優化JS加載時間過長的一種思路

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/。

1.背景

去年公司在漳州的一個項目中，現場工程人員反映地圖部分出圖有點緩慢，大約須要20多秒。和另一個同事一塊兒花了一兩天進行了代碼優化、代碼壓縮、中間件優化以及服務部署優化後使地圖出圖縮短到了9秒上下。

這裏對上次的經驗作一個總結，提供一種優化JS文件加載時間過長的思路。這裏的中間件使用的是tomcat6.0。

2.代碼優化

2.1代碼模塊化

代碼重構，使代碼模塊化。利用require.js，實現代碼按需加載。

2.2框架精簡

去掉沒必要要的框架，或者將框架中涉及到的部分提取出來，去掉不用的部分。好比漳州項目中，用了公司的傳統框架YUI，可是界面部分是用Jquery編寫。YUI框架僅僅利用了其事件機制。這裏咱們將YUI的事件機制進行提取，封裝成一個單獨的類後，其他部分所有捨去。

3.代碼打包壓縮

對代碼模塊化後的一個很大的好處就是方便代碼打包，避免出現公共變量名衝突等問題。這裏使用ant對JS文件進行壓縮合並打包。

                       

壓縮時要注意各模塊之間的依賴關係。將被依賴模塊放在依賴模塊的前面。

4.中間件壓縮優化

中間件環節壓縮的原理是：在客戶端請求網頁後，從服務器端將網頁文件壓縮，再下載到客戶端，由客戶端的瀏覽器負責解壓縮並瀏覽。相對於普通的瀏覽過程HTML ,CSS,Javascript , Text ，它能夠節省40%左右的流量。更爲重要的是，它能夠對動態生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等輸出的網頁也能進行壓縮，壓縮效率驚人。

Tomcat5.0之後的版本是支持對輸出內容進行壓縮的，使用的是gzip壓縮格式。

在server.xml文件中增長配置方式以下：

 

5.服務部署優化

當訪問後臺請求增多時，JS加載也會變慢，優化服務的部署能起到必定的做用。

5.1中間件線程池優化

在server.xml文件中合理增長中間件線程池的數目：

 

5.2中間件內存的優化

 在catalina.bat文件中合理增長中間件的內存:

 

5.3合理部署服務

漳州項目中的GIS服務和多個其餘服務部署在同一個中間件下。因爲GIS服務的訪問量遠大於其餘項目服務。在訪問量驟升時會對其餘服務形成必定的卡頓。

解決方案是對GIS項目在服務器上單獨發佈。

有博友給出一個建議:把動態請求和靜態請求分離，單獨部署靜態文件服務器。此方法我的以爲很好。

5.4合理集羣

設置多個服務節點，進行服務的負載均衡配置。

                                                      　　　　 -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                           若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^