首先感谢公司里傅哥对于Ext的Loader类的关注,没有他提起,我还一直不知道原来EXT3.3以后有了这么一个有趣的小东西。傅哥对新技术的敏感性要远强于我,向他学习,天天向上。
因为我对js了解不深,所以对一些问题的关注点或许太浅薄,请擅长js的大大见谅。
1. 这篇博文要记录什么:Extjs中的新类,Ext.Loader . 作用是可以在需要的时候即时加载js,而不是在页面head里一股脑儿把所有js都加载。
2. 环境条件:Extjs 3.3新增加的js,经我测试可以平稳转移到其他低版本的EXT上。
3. Loader试用代码:
Ext.Loader.load(["<c:url value='/dwr/interface/testaManager.js'/>"],function(){
。。。一堆加载完js要做的事情
});
Loader类很小,算上注释也只有96行代码,但它却实现了一个很实用的功能——在程序需要某个js的时候才对这个Js进行手工加载,因此在触发某些事件前不需要用到的js,我们就不必把它们写在页面的<head>里了。
刚听到这个功能的时候,我心中一震,这不是传说中的延迟加载么?细看了一下API,才发现不是想像中的“用到才自动加载”。而是基于一种手工编码的,在确定需要使用到某个js的时候,手动加载js的功能。
Ext.Loader.load方法就是延迟加载js的方法。它有四个参数:
-
fileList:将要被加载的一系列js的路径。切记,必须传入集合类型,否则fileList.length会解析错误。(必填)
-
callback: fileList中所有的Js都被加载完成后触发的回调函数(一般都要写的,否则底下的代码就异步跑过去了)
-
scope: callback的范围(选填)
-
preserveOrder:是否强制js的严格加载顺序。默认是false.(选填)
4. Loader如何运作:
Loader的作用简单明了,让我感兴趣的是它如何实现在需要的时候才加载js而不是在head里。
Loader.load方法的核心代码如下:
buildScriptTag: function(filename, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = filename;
//IE has a different way of handling <script> loads, so we need to check for it here
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = callback;
}
return script;
}
从这段代码中可以了解到2个东西:
- 页面后期才引入的js文件,可以通过document.createElement('script')创建出来,
然后设置属性,最后由
document.getElementsByTagName("head")[0].appendChild(创建出来的script);加入页面中
- 在创建script的过程中,为script注册了加载成功的监听事件,这里IE浏览器js加载事件为script.onreadystatechange,其他浏览器为script.onload. 注册加载成功监听事件的目的有2个:一个是当要加载的文件多于一个时,用回调触发下一个js的加载。另一个目的是在回调中检查,当加载到最后一个js的时候,调用最外层传入的callback,标识着所有js已经加载完成。
5. preserveOrder顺序加载的实现:
Loader是通过回调函数中的分支判断来控制是否顺序加载的。如果顺序加载,那么在buildScriptTag的回调函数中才触发下一个js的加载,如果不用顺序加载,则此回调函数中只监控是否全部加载完成。
6. 通过documentFragment提升页面效率与减少DOM操作:
无论是否按顺序加载js,大体上script对象的生成流程是一致的,但有一个细节值得注意:
顺序加载的生成流程是: 创建script元素——>设置script——>追加script到head中 => 处理下一个script
无顺序加载js的流程是: 创建script元素——>设置script——>追加script到fragment中 => 处理下一个script ——>...——>追加fragment到head中
也就是说,顺序执行的时候,每创建一个script元素,就appendChild到head中一次。 而无顺序情况下,每个创建出来的script元素都会先appendChild到fragment中,最后一次性把fragment appendChild到head中。
为什么无顺序执行的时候不和顺序执行一样,直接把创建出来的script元素直接加入到head中呢?原因很简单,首先要了解什么是documentFragment. documentFragment 是一個無父對象的document對象. 如果没有使用documentFragment,每次执行head的appendChild都会改变页面的表现,同时更新整个页面。而通过documentFrament可以达到只更新一次页面的目的,减小页面的开销。
分享到:
相关推荐
如果某些组件或类在应用启动时并不需要,但可能会在稍后的某个时刻被用到,可以使用 `requires` 属性将它们标记为延迟加载: ```javascript Ext.define('MyApp.view.MyPanel', { extend: 'Ext.panel.Panel', ...
当用户滚动或展开树的一部分时,只加载当前需要的节点,其余部分在需要时按需加载,这种机制称为延迟加载或按需加载。 要使用`Ext.ux.tree.PagingTreeLoader`,你需要配置一个`TreePanel`,并设置其`loader`属性为`...
例如,如果你有一个名为`MyApp.View`的类,但初始页面加载时并不需要,你可以延迟加载它,直到用户触发相应的操作。这样可以显著降低首屏加载时间。 `ExtEnsure.js`可能是对`Ext.Loader`的一个扩展或增强,以提供更...
在Ext Tree Panel中,我们可以通过设置`loader`属性来启用延迟加载,指定一个`TreeLoader`对象,该对象负责从服务器获取更多数据。 **3. JSON数据交互** JSON是树Panel与服务器进行数据交互的常用格式。在本例中,...
在使用Extjs时,可以通过设置`Ext.Loader`来启用动态加载,并指定资源路径: ```javascript // 开启动态加载 Ext.Loader.setConfig({ enabled: true }); // 设置文件路径,将“../ux/”目录下的所有Js文件映射到...
开发者可以使用`Ext.util.DelayedTask`或`Ext.Function.defer`来延迟执行函数,这对于异步操作和定时更新非常有用。 4. 键盘导航事件 在创建用户界面时,键盘导航是提升无障碍性的关键。ExtJS4支持键盘事件监听,...
2. **延迟加载**:Loader支持延迟加载,意味着只有当类真正被引用时才会加载。这减少了初始页面加载时间,提高了用户体验。 3. **路径配置**:Loader需要知道类文件的存储位置。在ExtJS 4中,可以通过设置'paths'...
- 使用延迟加载(lazy loading)减少初始页面加载时间。 - 利用`Ext.util.CSS`和`Ext.util.CSS.compress`压缩CSS。 - 使用`Ext.Loader`动态加载所需的类,避免加载未使用的代码。 - 对大数据量的列表和网格使用分页...
总结一下,ExtJS4中的`requires`机制是一种优化性能的方法,它允许开发者延迟加载不立即需要的代码。通过`Ext.Loader.setConfig`配置加载器路径,然后用`Ext.require`指定需要加载的模块,可以确保在需要时按需加载...
同时,为了优化用户体验,可以考虑使用EXT的延迟加载(lazy loading)特性,只有在用户展开节点时才加载其子节点数据,减少初始加载的时间。 总之,EXT与XML的结合使得创建动态树形菜单变得简单而高效。通过理解EXT...
`AsyncTreeNode`类就是用于实现这个功能的,它代表了一个可以延迟加载子节点的树节点。 3. **JSP作为后台数据源** JSP负责生成JSON格式的树数据,这些数据将被ExtJS的树组件消费。在JSP中,你可以使用Servlet或...
这种延迟加载(Lazy Loading)机制有助于减少不必要的数据加载,提升应用程序性能。 为了演示TreePanel的使用,文中提供了两个实例。这两个实例涉及如何从一个Servlet中读取JSON格式的数据,并将其用于TreePanel的...
在Web开发中,将CSS与JavaScript分离有利于提高页面加载效率,避免因为JavaScript加载延迟而影响到页面的渲染。 ### 安装步骤 对于Webpack 2及以上版本,你可以使用以下命令安装`extract-text-webpack-plugin`: ...