`

Ext.Loader使用(js延迟加载)

    博客分类:
  • Ext
阅读更多

首先感谢公司里傅哥对于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 &lt;script&gt; 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可以达到只更新一次页面的目的,减小页面的开销。

 

5
0
分享到:
评论

相关推荐

    Ext4 动态加载js例子

    如果某些组件或类在应用启动时并不需要,但可能会在稍后的某个时刻被用到,可以使用 `requires` 属性将它们标记为延迟加载: ```javascript Ext.define('MyApp.view.MyPanel', { extend: 'Ext.panel.Panel', ...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    当用户滚动或展开树的一部分时,只加载当前需要的节点,其余部分在需要时按需加载,这种机制称为延迟加载或按需加载。 要使用`Ext.ux.tree.PagingTreeLoader`,你需要配置一个`TreePanel`,并设置其`loader`属性为`...

    JS.rar_ExtEnsure.js_ext js java

    例如,如果你有一个名为`MyApp.View`的类,但初始页面加载时并不需要,你可以延迟加载它,直到用户触发相应的操作。这样可以显著降低首屏加载时间。 `ExtEnsure.js`可能是对`Ext.Loader`的一个扩展或增强,以提供更...

    Ext tree json 动态加载完美实例

    在Ext Tree Panel中,我们可以通过设置`loader`属性来启用延迟加载,指定一个`TreeLoader`对象,该对象负责从服务器获取更多数据。 **3. JSON数据交互** JSON是树Panel与服务器进行数据交互的常用格式。在本例中,...

    js语法之extjs

    在使用Extjs时,可以通过设置`Ext.Loader`来启用动态加载,并指定资源路径: ```javascript // 开启动态加载 Ext.Loader.setConfig({ enabled: true }); // 设置文件路径,将“../ux/”目录下的所有Js文件映射到...

    ExtJs4新类库特性详解及JS新语法扩展.pdf

    开发者可以使用`Ext.util.DelayedTask`或`Ext.Function.defer`来延迟执行函数,这对于异步操作和定时更新非常有用。 4. 键盘导航事件 在创建用户界面时,键盘导航是提升无障碍性的关键。ExtJS4支持键盘事件监听,...

    extjs4 loader 官方实例

    2. **延迟加载**:Loader支持延迟加载,意味着只有当类真正被引用时才会加载。这减少了初始页面加载时间,提高了用户体验。 3. **路径配置**:Loader需要知道类文件的存储位置。在ExtJS 4中,可以通过设置'paths'...

    Extjs规范(自己的)

    - 使用延迟加载(lazy loading)减少初始页面加载时间。 - 利用`Ext.util.CSS`和`Ext.util.CSS.compress`压缩CSS。 - 使用`Ext.Loader`动态加载所需的类,避免加载未使用的代码。 - 对大数据量的列表和网格使用分页...

    ExtJS4中的requires使用方法示例介绍

    总结一下,ExtJS4中的`requires`机制是一种优化性能的方法,它允许开发者延迟加载不立即需要的代码。通过`Ext.Loader.setConfig`配置加载器路径,然后用`Ext.require`指定需要加载的模块,可以确保在需要时按需加载...

    解析Xml构建Ext树形菜单

    同时,为了优化用户体验,可以考虑使用EXT的延迟加载(lazy loading)特性,只有在用户展开节点时才加载其子节点数据,减少初始加载的时间。 总之,EXT与XML的结合使得创建动态树形菜单变得简单而高效。通过理解EXT...

    Ext动态树的生成,后台是JSP

    `AsyncTreeNode`类就是用于实现这个功能的,它代表了一个可以延迟加载子节点的树节点。 3. **JSP作为后台数据源** JSP负责生成JSON格式的树数据,这些数据将被ExtJS的树组件消费。在JSP中,你可以使用Servlet或...

    JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

    这种延迟加载(Lazy Loading)机制有助于减少不必要的数据加载,提升应用程序性能。 为了演示TreePanel的使用,文中提供了两个实例。这两个实例涉及如何从一个Servlet中读取JSON格式的数据,并将其用于TreePanel的...

    详解extract-text-webpack-plugin 的使用及安装

    在Web开发中,将CSS与JavaScript分离有利于提高页面加载效率,避免因为JavaScript加载延迟而影响到页面的渲染。 ### 安装步骤 对于Webpack 2及以上版本,你可以使用以下命令安装`extract-text-webpack-plugin`: ...

Global site tag (gtag.js) - Google Analytics