首页 web前端 js教程 为Extjs加加速(javascript加速)_extjs

为Extjs加加速(javascript加速)_extjs

May 16, 2016 pm 06:21 PM
extjs 加速

EXT的全部js是比较大的,一个ext-all-debug.js就达2m多,它的压缩版(去掉js中的换行及空格),也达600多k,这对于在网速不太快的时,下载js就得漫长的等待。其中日历任务控件,js多达四五个,每个js大小都达70多k,尽管我们采用了后加载的方式,则当用户点击我的任务功能时,才下载该js,但这样仍然很慢,因为下载的js很慢
,鉴于此,在互联网上使用类似Joffice类似的程序,速度会使很多开发商不敢选用ext作为开发技术。

我们可以从以下几种方法来提高应用程序的运行速度:
一.前期尽量少加载js.
这点在Joffice中有比较好的运用,采用的是由ScriptMgr.load方法来完成,加载完成后,其会在body中插入一个div,只要当前页面不被刷新,下次再访问该功能时,不需要再加载js

复制代码 代码如下:

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,"");
var view = eval('new ' + viewName + '()');
callback.call(this, view);
}
});
}

二.用Gzip进行js的超强压缩
Gzip的官方网址为:
http://www.gnu.org/software/gzip/
Gzip的使用很简单
解压至某个目录,会看到有一个Gzip.exe文件,然后在命令窗口进入该目录,执行
gzip ext-all.js
ext-all.js马上变成为ext-all.js.gz
大小从原来600多k摇身一变成了160多k,简直压细小很多。这回下载速度就非常快了。
那么浏览器能否解析这种压缩文件?答案是肯定的,前提是告诉浏览器,这种文件需要解压,然后再执行,解压的过程由浏览器来执行。
那么应用程序如何告诉浏览器,该文件需要解压呢,这得由服务器通过Http的Header指令来进行。
在JOffice中,就是通过Filter来进行的。
1.把ext.all.js.gz文件名改为ext.all.gzjs,Filter等一下就会拦截这种文件的访问。
2.写一个Filter,完成向Header添加指令
代码如下:
复制代码 代码如下:

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.在WEB.xml 文件中,添加以下配置:
复制代码 代码如下:


GzipJsFilter
com.htsoft.core.web.filter.GzipJsFilter

headers
Content-Encoding=gzip



GzipJsFilter
*.gzjs
lt;/filter-mapping>


4.在index.jsp中引入该压缩文件:

为Extjs加加速(javascript加速)_extjs

可以看到浏览器解压后,其代码是一样的:

为Extjs加加速(javascript加速)_extjs

大家可以看到以上,这块是在外网使用的,其速度是比较快的。当然,浏览器解压这个文件需要一点时间,不过在本地解压是非常快的,可以不用管。

虽说不能完全解决其速度问题,但是还是能有所帮助。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Laravel缓存机制:加速应用程序的响应时间 Laravel缓存机制:加速应用程序的响应时间 Aug 26, 2023 pm 08:12 PM

Laravel缓存机制:加速应用程序的响应时间引言:在今天的互联网时代,快速的应用程序响应时间对于用户体验和业务成功至关重要。为了提高应用程序的性能和响应速度,开发人员需要采取一些策略。其中之一就是使用缓存机制。Laravel作为一款流行的PHP框架,提供了一套强大的缓存机制,可以帮助我们加速应用程序的响应时间。本文将详细介绍Laravel缓存机制的使用方法

如何在FastAPI中使用缓存来加速响应的速度 如何在FastAPI中使用缓存来加速响应的速度 Jul 28, 2023 pm 08:17 PM

如何在FastAPI中使用缓存来加速响应的速度引言:在现代Web开发中,性能是一个重要的关注点。如果我们的应用程序不能快速地响应客户请求,可能会导致用户体验的下降甚至用户流失。而使用缓存是一个提高Web应用程序性能的常见方法之一。在本文中,我们将探讨如何使用缓存来加速FastAPI框架的响应速度,并提供相应的代码示例。一、什么是缓存?缓存是一种将经常被访问的

如何使用Numba加速Python程序的数值计算 如何使用Numba加速Python程序的数值计算 Aug 02, 2023 pm 05:37 PM

如何使用Numba加速Python程序的数值计算引言:在进行数值计算时,Python是一种非常灵活和易于使用的语言。然而,由于Python是一种解释型语言,它的运行速度相对较慢,特别是在密集的数值计算任务中。为了提高Python程序的性能,我们可以使用一些优化工具和库。其中一个非常强大的库是Numba,它可以在不改变Python代码结构的情况下,使用即时编译

如何解决Win7电脑网速缓慢问题 如何解决Win7电脑网速缓慢问题 Jan 04, 2024 am 09:17 AM

很多使用win7系统电脑的小伙伴,发现使用电脑的时候发现网速特别慢。这是什么情况呢?可能是你网络设置里面对网络有一定的限制,今天小编教你们如何解除网络限制,让网速变得极快,只要选择高级设置里面将其值更改为“20MHz/40MHzauto”即可,具体的教程一起来看看吧。提升win7电脑网速的方法1.小编这里以win7系统为例说明,鼠标右键桌面任务栏右侧的“网络”图标,选择“网络和共享中心”打开。2.在新出现的界面中点击“更改适配器设置”,然后鼠标右键“本地连接”选择“属性”打开。3.在打开的“本地

如何启用硬件加速 如何启用硬件加速 Feb 18, 2024 pm 01:41 PM

硬件加速怎么开随着科技的发展,硬件加速已经成为了提升计算机性能的重要手段之一。通过利用硬件加速,我们可以加快电脑运行速度,提升图形处理能力,使得计算机更加高效稳定。那么,硬件加速到底如何开启呢?本文将为你详细介绍。首先,我们需要明确硬件加速的概念。硬件加速一般是指使用计算机的专用硬件进行加速处理,而不是通过软件来完成。常见的硬件加速包括GPU(图形处理器)加

Vue中如何配置和使用CDN进行加速 Vue中如何配置和使用CDN进行加速 Oct 15, 2023 pm 02:31 PM

Vue中如何配置和使用CDN进行加速在Vue项目中,使用CDN(ContentDeliveryNetwork)可以有效地加速网页加载速度,提升用户体验。CDN技术通过将静态资源文件分发到全球各个地点的服务器上,使用户可以从离用户最近的服务器上快速获取资源,减少了数据传输的时间和延迟。下面将详细介绍Vue中如何配置和使用CDN进行加速。首先,我们需要找到一

如何配置Nginx代理服务器以加速Web服务的响应时间? 如何配置Nginx代理服务器以加速Web服务的响应时间? Sep 05, 2023 pm 03:24 PM

如何配置Nginx代理服务器以加速Web服务的响应时间?引言:在今天的互联网时代,快速响应的Web服务对于用户体验至关重要。而Nginx作为一款高性能的轻量级反向代理服务器,可以有效地提高Web服务的响应速度。本文将介绍如何配置Nginx代理服务器以加速Web服务的响应时间,并结合代码示例进行详细说明。第一部分:安装和配置Nginx代理服务器安装Nginx首

win7开机怎么优化加速 win7开机怎么优化加速 Dec 26, 2023 pm 01:11 PM

如果我们的电脑上安装的操作系统是win7,那么有的小伙伴在使用的过程中如果遇到了开机时间变长的话,想要对自己的电脑进行优化,首先我们可以尝试在电脑中进行相关的设置,关闭一些开机启动项。或者是通过使用第三方加速软件来进行相关的优化即可。详细步骤就来看下小编是怎么做的吧~win7开机怎么优化加速1、电脑桌面不要放太多文件和图标,会使电脑反应变慢的,软件尽量不要安装在c盘。2、尽量设置ip为静态ip,可以减少电脑开机启动时间和进入桌面后的反映时间。3、现在的系统,占内存也比较大,有必要的话,加多条内存

See all articles