優化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合理叢集
設定多個服務節點,進行服務的負載均衡配置。