優化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/

                                                                           如果您覺得本文確實幫助了您,可以微信掃一掃,進行小額的打賞和鼓勵,謝謝 ^_^

                                        


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM