Ext.Loader应用(js延迟加载)
日期：2014-05-16 浏览次数：20435 次
1. 这篇博文要记录什么：Extjs中的新类，Ext.Loader . 作用是可以在需要的时候即时加载js,而不是在页面head里一股脑儿把所有js都加载。 ? 2. 环境条件：Extjs 3.3新增加的js，经我测试可以平稳转移到其他低版本的EXT上。 ? 3. Loader试用代码： ? ? Loader类很小，算上注释也只有96行代码，但它却实现了一个很实用的功能——在程序需要某个js的时候才对这个Js进行手工加载，因此在触发某些事件前不需要用到的js，我们就不必把它们写在页面的<head>里了。 刚听到这个功能的时候，我心中一震，这不是传说中的延迟加载么？细看了一下API，才发现不是想像中的“用到才自动加载”。而是基于一种手工编码的，在确定需要使用到某个js的时候，手动加载js的功能。 ? Ext.Loader.load方法就是延迟加载js的方法。它有四个参数： ? ? ? 4. Loader如何运作： Loader的作用简单明了，让我感兴趣的是它如何实现在需要的时候才加载js而不是在head里。 Loader.load方法的核心代码如下： ? ? 从这段代码中可以了解到2个东西： ? ? 然后设置属性，最后由 document.getElementsByTagName("head")[0].appendChild(创建出来的script);加入页面中 ? ? ? 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可以达到只更新一次页面的目的，减小页面的开销。 ?Ext.Loader.load(["<c:url value='/dwr/interface/testaManager.js'/>"],function(){
。。。一堆加载完js要做的事情
});
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;
}
?
