注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

韩国恺的博客

hanguokai.com

 
 
 

日志

 
 

ExtJs 加载优化  

2010-08-11 23:00:32|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
ExtJS 是个功能丰富、强大的 javascript 库,适合做一些富客户端界面。但是其庞大的体积会导致网页加载时间长,给人很慢的感觉。

为了找到网页加载慢的真正原因,首先你应该用 YSlow 这样的工具仔细分析一下,看看到底是哪些方面导致的。ExtJS可能只是其中的一个原因,也许还有别的地方影响了加载速度。下面只谈谈如何解决 ExtJs 加载慢的问题。

就像任何软件一样,功能越多就会体积越大,这个在所难免。
对于ExtJS 3.x,最简单的傻瓜式使用方法就是在页面中引入这三个文件:
ext-all.css(138K)、ext-base.js(32K)、ext-all.js(635K)
还有 ext-core.js(85K),另外js文件还有对应的debug版:ext-base-debug.js(78K)、ext-all-debug.js(1.13M)
这仅仅是ExtJS,你的页面中肯定还有很多其它东西,加在一起可就不小了。按照一般的网速,下载这些东西就要等半天了。

1.不要使用debug的js文件(体积缩小1/2)
debug版的js和非debug版的js完全一样,只是没有压缩而已,但体积大了一倍,ext-all-debug.js达到1.13M!
所以,不要使用debug的,除非你需要做相关调试。就算要调试,那也只是在开发的时候,别忘了换回去。

2.自定义裁减 extjs(体积缩小到原来的几分之一)
extjs 功能众多,但大多数人只用到其中的少数功能。傻瓜式的方式只是在开发时简单,正是环境应该用多少使多少定制一份自己用到的部分,这样可以小很多。extjs也是模块化实现的,在其网站上可以自定义一份:http://www.sencha.com/products/js/build/

3.启用gzip压缩(体积进一步缩小到原来的几分之一)
这个很重要。一般web服务器都支持gzip压缩,gzip压缩对于文本类型的文件都有很好的压缩效果。比如 635K 的 ext-all.js 经过gzip压缩后只有 168K,85.8K的ext-core.js压缩后是28.6K,太棒了!
apache、nginx等服务器均支持gzip压缩,建议配置一下对所有超过2k的 js、css 文件启用gzip压缩。除了web服务器,像tomcat、jetty这样的应用服务器也都支持gzip压缩。具体查看配置文档就知道了,很简单的。
提示:建议使用 静态gzip压缩 或者叫 预压缩静态内容,因为server在运行时进行压缩要消耗一定的cpu资源,而对于js这些静态内容而言完全可以预先压缩好,如果有以 .gz 结尾的同名文件,server直接返回压缩好的内容即可,这样减轻一些服务器的负担。
常见的后台组合是动内容和静态内容分离,然后让Web服务器处理所有的静态资源,应用服务器专心处理动态内容。
中小型应用也可以只用tomcat这样的应用服务器(简单一些),如果JavaEE的servlet容器不支持静态压缩,可以编写一个filter来实现同样的压缩或缓存效果。
话说多了,这方面都属于性能优化了。

网上还有人说使用JSA这样的 javascript 脚本压缩、混淆工具还可以进一步缩小体积,实际上非debug的js已经是经过一定压缩的了,继续做语言层面的压缩效果不明显。并且如果已经使用gzip压缩了,就没必要做这个了。

以上只是在减少文件本身的体积,除此之外还可以:
4. CDN 加速
CDN 加速非常重要,尤其是ExtJS这种静态不变的文件,这比用户直接访问你的服务器快多了(除非是局域网使用)。

ExtJS 官方提供了CDN服务:
4.0
http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js

3.1
http://extjs.cachefly.net/ext-3.1.1/resources/css/ext-all.css
http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js
http://extjs.cachefly.net/ext-3.1.1/ext-all.js

Google Libraries API 提供的 Ext Core 3.1 CDN
https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js

如果你主要是面向国外用户,建议使用以上 CDN 服务。Google的更好一点。

但是针对国内用户,以上CDN的效果较差,因为他们缺少国内的节点,所以对国内并没有加速效果。
我使用监控宝在国内的6个节点测试,都还没有我一个北京多线机房快,Google的速度比cachefly的稍好一点。
所以国内不推荐使用他们的CDN。有条件的最好自己使用国内的CDN 服务。

5. 缓存优化
1) 充分利用客户端浏览器上的缓存,下载一次就可以了,以后全部使用本地缓存。主要适用于用户会多次访问的情况。
2) 预加载技术,在用户还没有进入需要ExtJS的页面中(如登录界面),提前异步预加载文件,这样就提前有了缓存,下一步用户进入的时候就会感觉很快了。
  评论这张
 
阅读(6059)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018