Extjs の高速化 (JavaScript アクセラレーション)_extjs

EXT 内のすべての js は比較的大きく、1 つの ext-all-debug.js は 2MB を超え、圧縮バージョン (js 内の改行とスペースを削除したもの) も 600K を超えます。非常に高速なネットワークでは、時間が来ると、js をダウンロードするのに長時間待たなければなりません。このうち、カレンダータスクコントロールにはjsが4～5個もあり、各jsのサイズは70Kを超えますが、ポストロード方式を採用していますが、ユーザーがマイタスク機能をクリックしたときにのみjsがダウンロードされます。しかし、これはまだ非常に複雑です。ダウンロードされる js が非常に遅いためです
これを考慮すると、インターネット上で Joffice のようなプログラムを使用する速度を考えると、多くの開発者は開発テクノロジとして ext を選択することを躊躇するでしょう。

次の方法でアプリケーションの実行速度を向上させることができます。
1. 初期段階での js の読み込みを最小限に抑えます。
これは、Joffice で ScriptMgr.load を使用することにより効果的です。ロードが完了すると、現在のページが更新されない限り、次回この関数にアクセスするときに js
をロードする必要はありません。

コードをコピーします コードは次のとおりです:

function $ImportJs(viewName,callback) {
var b = document.getElementById(viewName '- hidden');
if (b != null) {
var view = eval('new ' viewName '()'); this, view);
} else {
var jsArr = eval('App.importJs.' viewName);
if(jsArr==unknown){
var view = eval('new ' viewName '()');
callback.call(this, view);
return ;
}
ScriptMgr.load({
scripts : jsArr,
callback : function( ) {
Ext.DomHelper.append (document.body,"

") ;
var view = eval(' new ' viewName '()');
callback.call(this, view)
}


2. js に Gzip を使用する 非常に強力な圧縮
Gzip の公式 Web サイトは次のとおりです:

http://www.gnu.org/software/gzip/
Gzip の使い方は非常に簡単です
ディレクトリに解凍すると、Gzip.exe ファイルがあることがわかります。コマンド ウィンドウにディレクトリを入力して、
gzip ext-all.js を実行します。
ext-all.js はすぐに ext- になります。 all.js.gz
元のサイズから変更されます 600k 以上が突然 160k 以上になり、はるかに小さくなります。今回はダウンロード速度が非常に速いです。
では、ブラウザはこの種の圧縮ファイルを解析できるのでしょうか?答えは「はい」です。前提として、この種のファイルは解凍する必要があることをブラウザに伝え、解凍プロセスはブラウザによって実行されます。
では、アプリケーションはどのようにしてファイルを解凍する必要があることをブラウザに伝えるのでしょうか?これは、サーバーが Http Header コマンドを通じて行う必要があります。
JOffice では、これはフィルターを通じて行われます。
1. ext.all.js.gz ファイルの名前を ext.all.gzjs に変更します。しばらくすると、フィルターがこのファイルへのアクセスを遮断します。
2. フィルターを作成し、ヘッダーに命令を追加します
コードは次のとおりです:

コードをコピーしますコードは次のとおりです。 package com.htsoft.core.web.filter;

import java.io.IOException; java.util.Iterator;

import javax.servlet.Filter;
import javax.servlet.FilterConfig; javax.servlet.ServletException;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
public class GzipJsFilter は Filter を実装します {
Map headers = new HashMap();
public void destroy() {
}
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain) chain) throws IOException, ServletException {
if(req instanceof HttpServletRequest) {
doFilter((HttpServletRequest)req, (HttpServletResponse)res,chain);
chain.doFilter(req, res);
}
}
public void doFilter(HttpServletRequest request,
HttpServletResponse 応答, FilterChain チェーン)
throws IOException, ServletException {
request.setCharacterEncoding("UTF-8") );
for( Iterator it = headers.entrySet().iterator();it.hasNext();) {
Map.Entry エントリ = (Map.Entry)it.next(); response.addHeader((String)entry.getKey(),(String)entry.getValue());
}
chain.doFilter(リクエスト, レスポンス);
public void init( FilterConfig config) throws ServletException {
String headersStr = config.getInitParameter("headers");
String[] headers = headersStr.split(","); ; headers.length; i ) {
String[] temp = headers[i].split("=");
this.headers.put(temp[0].trim(), temp[1] .trim());
}
}
}


3. WEB.xml ファイルに次の設定を追加します:




コードをコピー


コードは次のとおりです:

<フィルタ>
<フィルタ名>GzipJsFilter
<フィルタクラス>com.htsoft.core.web.filter.GzipJsFilter

<パラメータ名>ヘッダー
<パラメータ値>コンテンツエンコーディング


GzipJsFilter
.gzjs
lt;/filter-mapping>


4. 圧縮ファイルをindex.jspに導入します。

ブラウザが解凍した後のコードは同じであることがわかります:

上記のとおり、この部分は外部ネットワークで使用されており、速度は比較的高速です。もちろん、ブラウザでこのファイルを解凍するには時間がかかりますが、ローカルでの解凍は非常に速いため、放っておいても問題ありません。

速度の問題を完全に解決することはできませんが、それでも役立つことはあります。