1. 程式人生 > >優化JS載入時間過長的一種思路

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

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合理叢集

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