前段时间老是被客户投诉,说每天早上上班登陆我们的系统都要等好久。
终于下定决心要把这块优化下。
首先检查问题所在,调研发现客户的习惯是把浏览器cache过期时间设置为12个小时。
每天在上登陆的时候都需要重新再把全部的css,js,html,jpg。。。文件全部加载一遍。
而我们系统使用的gwt ext编写的前端页面,完全符合ajax的风格。
在用户登录之后,再也不做整体的页面刷新。也就是说,全部的js,html,css文件全部
被编译在了index.html之中。检查发现index.html有5M+,好吧,就是你的问题。。。
关于加快页面访问速度的实现,总体而言有两个努力的方向。
1:使用缓存。
2:压缩传输。
关于基于资源的Http Cache实现,参见robbin的相关文章,这里就跳过了。
http://robbin.iteye.com/blog/462476
主要讲下压缩传输文件的实现。
压缩文件的途径有两种:1 手动压缩JS,编写自己的过滤器(Filter),配置自己过滤器。2 使用工具包。
1 我只相信自己写的代码
【1】将js文件手动压缩。如项目中的ext-all.js 和 ext-core.js.使用gzip压缩,压缩之后将
文件后缀改为.gzjs.(压缩比例大致为70%)。
【2】编写Filter。
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 = this.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());
}
}
}
领会精神,主题思想就是加文件头和取文件头。
【3】配置web.xml
<filter>
<filter-name>GzipJsFilter</filter-name>
<filter-class>com.monica.bussiness.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>
</filter-mapping>
加入过滤器配置。指定我们需要解压的文件类型。
2 我不想写自己的轮子
【1】下载tk-filter工具包。下载地址 http://sourceforge.net/projects/filterlib
【2】将解压后得到的jar包引入工程。将tk-filters.properties加入工程WEB-INF/class目录下
修改tk-filters.properties GZIPFilter.Enabled=true
(其他还有几个打印压缩比例之类的控制,自己改变参数选择就可以了)
【3】配置web.xml
<filter>
<filter-name>GZIPFilter</filter-name>
<filter-class>com.tacitknowledge.filters.gzipfilter.GZIPFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>GZIPFilter</filter-name>
<url-pattern>*.js</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>GZIPFilter</filter-name>
<url-pattern>*.css</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>GZIPFilter</filter-name>
<url-pattern>*.html</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>GZIPFilter</filter-name>
<url-pattern>*.gif</url-pattern>
</filter-mapping>
我们来看下压缩之后网络传输的大小
Elapsed Time 2.915 seconds
Network Round Trips 2
Downloaded Data 1258448 bytes
Uploaded Data 989 bytes
HTTP Compression Savings 4585156 bytes
DNS Lookups 0
TCP Connects 0
(使用工具为HttpWatcher 下载地址 http://www.httpwatch.com/download/)
压缩之后index页面大小为 1.1M,ext-all.js大小为138k。 压缩比例在80%左右。
推荐使用tk-filter,因为不仅不需要你新加入代码(预示着你需要重新测试),而且可以简便的配置
各个类型的文件,如html等。当然,手动压缩html也可以,但是这样你就需要每次在发布新版本的时候
都需要把新编译的html文件重新压缩一遍。在自动构建的过程中,这简直就是个灾难。
分享到:
相关推荐
extjs4.1的js包压缩,压缩成800K左右,加载快很多
使用了EXTJS和GZIP压缩,只是个dom可以参考学习数据库应该是找不到了。
extjs4.0结合My97DatePicker4.7版本使用 使用简单 方便 解决extjs中日期控件不能显示时间的问题 下载后将其放到extjs目录的examples下 直接运行date.html即可 extjs4.0版本 4.0以前的版本没有测试过 如果有4.0版本...
ASPNET 使用EXTJS 开发WEB网站
论坛上找的, Highstock与ExtJs完美结合使用,有案例(php),
资源 http://download.csdn.net/detail/superlazy/8948511 对应的源码 分卷1
ExtJS 使用Flash上传图片,上传之前可以预览,自动缩放,自定义提交地址和按钮文本。
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
ExtJS-3.4.0文档目录说明: ◊ adapter目录下是EXT的核心代码和底层库,包括jQuery、Prototype和YUI的适配器。 ◊ docs目录下是EXT的文档。 ◊ examples目录下是官方的演示示例。 ◊ pkgs目录下是EXT压缩后...
Extjs+Gride使用方法 Extjs Gride
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
extjs模板的使用说明
extjs使用说明 extjs的API jQuery使用说明 jQuery的API 很好用 很实用 不用上网就能知道jquery怎么用
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA 系统也正在使用ExtJS2.0 进行改造,使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习 ExtJS 的一些心得及小结,希望能帮助正在...
extjs中使用FusionChart举例
ExtJS示例,Grid的使用,Panle的使用,树的使用
众多的案例详细介绍了extjs的使用和实现效果
这几个月以来自己做extjs4开发整理下来的一些技术要点