Ext.Loader使用(js延迟加载)-优快云博客

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