paulwong

          My Links

          Blog Stats

          常用鏈接

          留言簿(66)

          隨筆分類(1387)

          隨筆檔案(1145)

          文章分類(7)

          文章檔案(10)

          相冊

          收藏夾(2)

          AI

          Develop

          E-BOOK

          Other

          養生

          微服務

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          GZip壓縮和按需裝載提升Ext Js的性能

          ext-all.js這個文件都有500多k,在頁面中直接引用這個js文件是很不現實的,曾經在一個大的項目中使用這個js,則直接導致頁面半天出不來的后果。于是自己研究了下,目前通過下面的方法來優化提升Ext Js的性能。

          使用JSVM
          JSVM (JavaScript Virtual Machine的縮寫),一個JavaScript基礎框架,sourceforge開源項目,由萬常華(wch3116)于2003年底發起, 目前最新版本是2.05,采用的是 BSD License 授權協議。本身JSVM也提供了JSVM+Ext2的實例,看看就知道怎么在JSVM下加入ext的js庫了。
          我在項目中是這么用的:

          <script type= "text/javascript"  src= "/depporject/comjs/jsvm2/jsre.js"  classpath= "dom2.gzjs;ext2p.gzjs"  modules= "smartloader"  ></script>

          為什么擴展名是gzjs呢,這是使用了gzip壓縮js文件

          使用Gzip壓縮

          gzip壓縮后,ext js文件的大小將只有100k左右。
          只是對gzip壓縮的文件需要提供filter(Java開發),為你的應用提高解壓縮功能,filter的寫法很簡單:

              public   void  doFilter(HttpServletRequest request, 
                      HttpServletResponse response, FilterChain chain) 
                       
          throws  IOException, ServletException 
                       
          for (Iterator it = headers.entrySet().iterator();it.hasNext();) 
                          Map.Entry entry 
          = (Map.Entry)it.next(); 
                          response.addHeader((String)entry.getKey(),(String)entry.getValue()); 

                      }
           
                      chain.doFilter(request, response); 
              }
           

               
          public   void  init(FilterConfig config)  throws  ServletException 
                  String headersStr 
          = config.getInitParameter( "headers" ); 
                  String[] headers 
          = headersStr.split( "," ); 
                   
          for ( int  i =  0 ; i < headers.length; i++
                      String[] temp 
          = headers[i].split( "=" ); 
                       
          this .headers.put(temp[ 0 ].trim(), temp[ 1 ].trim()); 
                  }
           
              }
           


          web.xml配置

          < filter > 
                   
          < filter-name > addHeaderFilter </ filter-name > 
                   
          < filter-class >org .common.AddHeaderFilter </ filter-class > 
                   
          < init-param > 
                       
          < param-name > headers </ param-name > 
                       
          < param-value > Content-Encoding = gzip </ param-value > 
                   
          </ init-param > 
            </ filter > 

          通過以上兩步,整個頁面裝載速度很快了。大家可以試試。
          另外在實際開發中,并不是將ext-all.js全部在jsvm中裝載,只是將常用的ext js代碼歸到一起,由gzip壓縮,然后又jsvm裝載(即ext2p.js,p代表部分),剩下的ext js代碼由jsvm按需裝載。

          posted on 2011-04-21 23:17 paulwong 閱讀(1175) 評論(0)  編輯  收藏 所屬分類: EXTJS


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 湖州市| 中宁县| 漳州市| 太谷县| 宣城市| 读书| 大埔区| 凌云县| 普洱| 阿克| 闵行区| 济源市| 天气| 宾阳县| 西宁市| 高清| 巴东县| 彭山县| 岗巴县| 民丰县| 普安县| 沙河市| 安泽县| 清苑县| 五常市| 高雄市| 马山县| 德化县| 巴里| 吉木萨尔县| 高青县| 黑山县| 台湾省| 上饶市| 丘北县| 湖州市| 慈利县| 淮安市| 厦门市| 西平县| 广河县|