ExtJs 加载优化

最新推荐文章于 2018-03-21 22:19:36 发布

X9X9X9X9

最新推荐文章于 2018-03-21 22:19:36 发布

阅读量844

点赞数 1

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的页面中（如登录界面），提前异步预加载文件，这样就提前有了缓存，下一步用户进入的时候就会感觉很快了。

关注