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 閱讀(1173) 評論(0)  編輯  收藏 所屬分類: EXTJS


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


          網站導航:
           
          主站蜘蛛池模板: 宣威市| 郓城县| 龙胜| 称多县| 金堂县| 威宁| 元氏县| 和林格尔县| 年辖:市辖区| 新闻| 长白| 彭州市| 青阳县| 龙井市| 治多县| 烟台市| 繁峙县| 盐边县| 哈尔滨市| 安宁市| 鞍山市| 龙门县| 阿尔山市| 沅江市| 五台县| 菏泽市| 黄平县| 教育| 北票市| 宣城市| 资溪县| 宜都市| 毕节市| 高台县| 丹凤县| 姚安县| 工布江达县| 岳普湖县| 南郑县| 韶关市| 汝州市|