`
yiminghe
  • 浏览: 1460133 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

yui3 loader的串行加载特性

阅读更多

yui3 的沙箱机制可以在多人协作开发方面提供很大的便利,常被举的例子之一就是:


重复载入脚本问题:

 

...
//开发者 A
<script src="a.js"></>
<div>
</div>
<script>
//a组件应用
</>

....
//开发者 B
<script src="a.js"></>
<script src="b.js"></>
<div>
</div>
<script>
//a,b组件一起应用
</>

开发者A,B的分离造成了完全没必要的 a 脚本引入,不过好点的是浏览器会缓存,但是更好的解决方案则是a完全不必引入。


yui3 的解决方案:

 

 

...
//开发者 A

<div>
</div>
<script>
//a组件应用
YUI().use("a",function(){
//action 1
});
</>

....
//开发者 B
<div>
</div>
<script>
//a,b组件一起应用
YUI().use("a","b",function(){
//action 2
})
</>

 

虽然通过异步加载,避免了引入了a脚本,但是是否异步加载的 a 对应生成的 script 节点会有两个? action 1与 action 2谁先运行?


在我原先的理解 中,既然是完全独立的沙箱,则现实中由于网络的不确定性 action1,action2的执行顺序不定,并且连续YUI() .use的异步脚本加载应该是完全独立并行的,这样的话是很理想的独立环境,但是由于两次use的互相独立必然会造成 a 的重复加载。

 

 


妥协与解决


yui3 这里不像我想的那样完全独立,而是确实考虑了重复加载情况,将use中的异步部分实际上通过全局队列做成了串行执行,且在每次异步加载前先要剔除当前已经加载过的模块。正是由于上述解决方案,也确定了 action1,action2的顺序一定,一定先action1,后action2,可能有点失望,如果上述例子换成

 

YUI().use("a",function(){
//action 1
})

......
html
......


YUI().use("b",function(){
//action 2
})

 

若同时创建两个脚本节点 a,b添加到文档,并行下载a,b必然能提高整体性能,但是为了保证一般情况下不要重复对同一模块多次从server读取(特别是开启combo情况下),在yui3的解决方案下,则变成了:先生成 a 节点添加到文档,待a脚本载入后,删除b和a相交的模块(这里为空),再生成 b 节点添加到文档,yui3强制实行了串行化。

 

实现:

 

1. 每次use都会调用Loade的insert方法:

 

//全局控制加载队列
_queue          = YUI.Env._loaderQueue,
 
insert: function(o, type) {
        .......
        //异步加载行为加入到队列
        _queue.add(function() {
            self._insert(copy, o, type);
        });
        //如果队列中没有正在执行的东西,就执行否则返回
        this._continue();
}

 

在加载中将队列状态设置为正在执行,加载后设置为执行完毕,并标志加载过的模块到全局对象

 

_continue:function(){
//....//标志队列在执行
_queue.running = true;
//....
}


_finish:function(){
//....
//标志队列空闲
_queue.running = false;
//....
}

 

2.而在将要真正创建 script节点进行异步加载前进行已加载模块剔除:

 

 _reduce: function() {
// remove if already loaded
//如果前面 use 过了就从待加载模块列表中删除
}

 

 

分享到:
评论

相关推荐

    yui3-master.zip

    YUI3采用了模块化的设计理念,每个功能都被封装为独立的模块,开发者可以根据需要按需加载,降低了整体代码的体积,提高了页面加载速度。在“yui3-master.zip”中,我们可以看到不同模块的源代码文件,如“build”...

    YAHOO YUI3简单入门

    YUI3的加载器(Loader)是其模块化系统的关键部分,它可以动态地按需加载所需的模块。只需指定需要的模块和依赖关系,加载器就会自动下载并执行它们。这使得开发者可以更灵活地管理代码,同时优化了网页的加载速度。...

    YUI3 dialog组件

    在YUI3中,首先需要通过`YUI().use()`方法加载Dialog相关的模块,例如: ```javascript YUI().use('dialog', function(Y) { // 在这里编写Dialog的代码 }); ``` 然后可以创建Dialog实例,指定其内容和属性: ```...

    YUI3 中tree的两种实现

    这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、...

    yui3-3.17.2最新版

    在实际使用YUI 3.17.2时,开发者可以通过`yui3-3.17.2`这个压缩包文件获取所有必要的资源。这个压缩包中包含了库的源码、示例、文档和其他辅助工具。开发者可以按照项目需求,选择合适的模块和组件进行集成。 在...

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...

    YUI3 Cookbook

    - **知识点**:YUI3 Gallery是一个社区驱动的扩展集合,包含了更多的插件和组件,通过加载这些模块可以扩展YUI3的功能。 - **应用场景**:适用于需要更高级功能或特定插件的情况。 6. **加载YUI2部件** - **知识...

    YUI3沙盒下的多模块交互实践

    YUI3的加载器(Loader)负责模块的加载、依赖管理以及执行。它支持异步加载和缓存机制,这不仅提高了性能,也使得用户体验更流畅。 在实践中,通过YUI3的沙盒模式,开发者可以灵活地组织和运行代码模块,避免全局...

    yui 资源包

    此外,YUI的延迟加载(LazyLoad)特性,能让非核心模块在需要时才加载,进一步优化资源使用。 总结,YUI 3.9.0 r2是一个强大的前端开发框架,它提供了一整套工具和组件,以应对复杂的界面设计挑战,并通过优化资源...

    YUI3.6文档及示例

    1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    YUI3.7.3 最新版本 带API

    1. **模块系统**:YUI3引入了CommonJS风格的模块系统,允许开发者通过`YUI.use()`方法加载所需模块,实现按需加载,减少页面初始化时的加载量。 2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义...

    Ajax(yui-slideshow)

    **一、YUI Slideshow的核心特性** 1. **异步加载**:YUI Slideshow支持动态加载内容,可以使用Ajax技术加载下一张幻灯片的内容,减少页面初次加载时的数据量,提高页面响应速度。 2. **多种过渡效果**:提供多种...

    YUI 3 Cookbook

    通过以上章节的详细介绍,《YUI 3 Cookbook》为读者提供了全面且实用的技术指南,无论是从基础的模块加载到高级的自定义Rollup创建,都能找到对应的解决方案和实施策略。这对于想要深入了解和熟练掌握YUI 3框架的...

    yui.rar 例子

    本篇文章将结合“yui.rar 例子”,深入探讨YUI的核心特性、模块化设计以及在实际开发中的应用。 首先,我们来看“yui.rar”中的例子,它展示了YUI的左中右布局模式。这个例子突显了YUI强大的布局管理能力。在Web...

    YUI3 完整包

    Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。

    yahoo3.0 YUI Examples

    1. **YUI 3.0架构**:YUI 3采用了模块化设计,允许开发者按需加载组件,降低了页面加载时间。每个模块都有独立的命名空间,避免了全局变量污染。 2. **核心组件**:YUI 3的核心组件包括事件处理、DOM操作、动画效果...

    YUi文档(中文的哦)

    所有使用YUI3的页面都需要包含这个核心模块,以便能够动态地加载所需的其他模块及其依赖项。 - **YUI实例**: 每个页面可以共享一个YUI实例,也可以根据需要使用多个实例。这提供了很大的灵活性。 - **加载机制**: ...

    yui_3.8.1.zip

    1. **模块系统**:YUI 3.8.1采用CommonJS规范,通过YUI.use()方法按需加载模块,降低初始页面加载时间。此外,还支持AMD(异步模块定义)模式,适应不同的开发需求。 2. **事件处理**:YUI提供了一套完整的事件系统...

Global site tag (gtag.js) - Google Analytics