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`： ...