EXT all js is relatively large, a ext-all-debug.js is more than 2 m, its compressed version (remove the line feed and space in js), also amounted to more than 600 k, this is a long wait for js download when the network speed is not fast. Among them, there are up to four or five calendar task controls. Each js has a size of over 70 k. Even though we use the post-load method, when the user clicks my task function, but it is still very slow because the js download is very slow.
In view of this, using programs similar to Joffice on the Internet will make many developers afraid to use ext as the development technology.
We can improve the running speed of applications in the following ways:
I. Load as few js files as possible in the early stage.
This is a good use of Joffice, using ScriptMgr. load Method to complete, after loading, it will insert a div in the body, as long as the current page is not refreshed, the next time you access this function, no need to load js
Copy codeThe Code is as follows:
Function $ ImportJs (viewName, callback ){
Var B = document. getElementById (viewName + '-hiden ');
If (B! = Null ){
Var view = eval ('new' + viewName + '()');
Callback. call (this, view );
} Else {
Var jsArr = eval ('app. importJs. '+ viewName );
If (jsArr = undefined ){
Var view = eval ('new' + viewName + '()');
Callback. call (this, view );
Return;
}
ScriptMgr. load ({
Scripts: jsArr,
Callback: function (){
Ext. DomHelper. append (document. body, "<div id = '"
+ ViewName
+ "-Hiden 'style = 'display: none'> </div> ");
Var view = eval ('new' + viewName + '()');
Callback. call (this, view );
}
});
}
Ii. Use Gzip for js Compression
The official Gzip website is:
Http://www.gnu.org/software/gzip/
Gzip is easy to use.
Decompress a directory to view a gzip.exe file, enter the directory in the Command window, and execute
Gzip ext-all.js
Ext-all.jsbecomes ext-all.js.gz.
The size has changed from 600 k to 160 k, which is much smaller. This download speed is very fast.
Can the browser parse this compressed file? The answer is yes, provided that the browser is informed that such files need to be decompressed and then executed. The decompression process is implemented by the browser.
Then how does the application tell the browser that the file needs to be decompressed? The server must use the Http Header command.
In JOffice, Filter is used.
1.change the ext.all.js.gzfile name to ext.all.gz js, and Filter will block access to such files.
2. Write a Filter to add the command to the Header.
The Code is as follows:
Copy codeThe Code is as follows:
Package com. htsoft. core. web. filter;
Import java. io. IOException;
Import java. util. HashMap;
Import java. util. Iterator;
Import java. util. Map;
Import javax. servlet. Filter;
Import javax. servlet. FilterChain;
Import javax. servlet. FilterConfig;
Import javax. servlet. ServletException;
Import javax. servlet. ServletRequest;
Import javax. servlet. ServletResponse;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
Public class GzipJsFilter implements 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 );
} Else {
Chain. doFilter (req, res );
}
}
Public void doFilter (HttpServletRequest request,
HttpServletResponse response, FilterChain chain)
Throws IOException, ServletException {
Request. setCharacterEncoding ("UTF-8 ");
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 String [] temp = headers [I]. split ("= ");
This. headers. put (temp [0]. trim (), temp [1]. trim ());
}
}
}
3. Add the following configuration in the WEB. xml file:
Copy codeThe Code is as follows:
<Filter>
<Filter-name> GzipJsFilter </filter-name>
<Filter-class> com. htsoft. core. web. filter. GzipJsFilter </filter-class>
<Init-param>
<Param-name> headers </param-name>
<Param-value> Content-Encoding = gzip </param-value>
</Init-param>
</Filter>
<Filter-mapping>
<Filter-name> GzipJsFilter </filter-name>
<Url-pattern> *. gzjs </url-pattern>
Lt;/filter-mapping>
<Servlet-mapping>
4. Introduce the compressed file in index. jsp:
<Script type = "text/javascript" src = "<% = request. getContextPath () %>/ext3/ext-all.gzjs"> </script>
You can see that the code of the decompressed browser is the same:
As you can see, this is used on the Internet, and its speed is relatively fast. Of course, it takes some time for the browser to decompress the file, but it is very fast to decompress the file locally.
Although the speed problem cannot be completely solved, it can still be helpful.