论坛首页 Web前端技术论坛

脚本安需导入(装载)的三种模式的对比

浏览 12296 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-03-30  

何谓安需装载?

脚本程序一般都是下载后执行 ,当脚本库非常庞大时,一次性下载起来非常费时,传统的解决方式是,按功能模块把脚本写在不同的文件中,页面上手动加入script标签装载指定内容,但 是这有一些缺点,类库的使用者需要知道没个脚本之间的关系,顺序要求等等,而不可能要求每个类库使用者都对其非常熟悉,出错的可能性很大。于是很多框架开 始支持导入指令,想使用什么一个导入函数就完了,不必一堆堆的script文件,不用小心翼翼的关注着他们的依赖关系。

安需装载可分如下三种模式:

  • 即时同步按需装载阻塞,JSI、JSVM、dojo)
    最简单的按需装载实现,通过XMLHttpRequest同步装载脚本文件实现。问题是,浏览器使用这种方式同步获取资源时将导致浏览器阻塞:停止响应用户事件、停止页面重画操作。所以,虽然编程最为简单,但是用户体验最差。
  • 异步装载无阻塞,JSI2.0+)。
    异步导入,不必多做解释,用户体验好,但是因为其异步特征,处理起来比较麻烦。
  • 延迟同步按需装载无阻塞,JSI2.0+)
    JSI通过动态预装载功能实现的一种同步获取资源的方法,虽然也是同步,但没有阻塞,可以算时兼顾易用性和用户体验的机决方按。缺点时有一定延迟,当前脚本标签中不可用。

使用方法(JSI示例)

以一个代码语法着色程序为例:
类库位置:example/codedecorator/code.js
页面位置:example/xxx.html
  • 即时同步按需装载
    js 代码
    1. $import("example.codedecorator.Code");
    2. var code1 = new Code();
    3. code1.id = "libCode";
    4. code1.decorate();

  • 异步装载
    js 代码
    1. $import("example.codedecorator.Code",function(Code){
    2. var code1 = new Code();
    3. code1.id = "libCode";
    4. code1.decorate();
    5. })

  • 延迟同步按需装载无阻塞,JSI2.0+)
    xml 代码
    1. <script>"../scripts/boot.js"><\/script>
    2. <script>
    3. $import("example.codedecorator.Code",true);
    4. <\/script>
    5. <script>
    6. var code1 = new Code();
    7. code1.id = "libCode";
    8. code1.decorate();
    9. <\/script>

示例说明:

下载后最好能放到一个能受到网速限制的服务器上,只有这样才能看到阻塞的问题。

第一次发布仅再ff上测试通过。

第二次发布修正ie上的错误。

第三次发布修正opera上的错误。

在线测试

http://jsintegration.sourceforge.net/example/code.html

http://www.xidea.org/project/jsi/example/code.html

参考:

JSI 导入函数: function $import(path, callbackOrLazyLoad, target )

JSI2 预览版下载:http://groups.google.com/group/jsier/files

   发表时间:2007-03-30  
个人感觉在js不是很大的情况下 同步加载系统才是最稳定的
0 请登录后投票
   发表时间:2007-03-30  
而且加载也就一次吧, 下次进来就有缓存了
0 请登录后投票
   发表时间:2007-03-30  
cozone_柯中 写道
个人感觉在js不是很大的情况下 同步加载系统才是最稳定的


我只能说同步装载是最简单的,但是,阻塞问题会让你无法忍受。
0 请登录后投票
   发表时间:2007-03-30  
cozone_柯中 写道
而且加载也就一次吧, 下次进来就有缓存了


问题是网速慢,阻塞严重时,用户进去一次就没有第二次了。

以前jsi1.1集成的那些例子,dojo的例子。都可以去忍受一下,死机的感觉。

jsvm聪明一点,所有的例子都是打包的,没有用到真正的安需装载。
还有他是国内的站点,快就一个字
0 请登录后投票
   发表时间:2007-03-30  
jindw 写道
cozone_柯中 写道
个人感觉在js不是很大的情况下 同步加载系统才是最稳定的


我只能说同步装载是最简单的,但是,阻塞问题会让你无法忍受。



我的同步加载的意思是 , 当js代码不是很多(使用了压缩),页面还没有展现的时候一起打包下载下来,
这样就不存在后续的问题了。

其实当压缩后第一次访问js代码在500k左右是可以接受的
0 请登录后投票
   发表时间:2007-03-30  
其实

引用

异步按需装载(无阻塞,JSI2.0+)。
异步导入,不必多做解释,用户体验好,但是因为其异步特征,处理起来比较麻烦。
延迟同步按需装载(无阻塞,JSI2.0+)。


复杂就复杂在不稳定性,因为你要不停的判断是否下载完毕。其实也是一个等待过程
0 请登录后投票
   发表时间:2007-03-30  
像bindows,qooxdoo用一个splash window先显示loading %,一次读入所有的js,可以被分到哪一种?
0 请登录后投票
   发表时间:2007-03-30  
cozone_柯中 写道
其实

引用

异步按需装载(无阻塞,JSI2.0+)。
异步导入,不必多做解释,用户体验好,但是因为其异步特征,处理起来比较麻烦。
延迟同步按需装载(无阻塞,JSI2.0+)。


复杂就复杂在不稳定性,因为你要不停的判断是否下载完毕。其实也是一个等待过程


我已经吧代码示例贴出来了,是简是繁你一看便知。
是的,异步的处理是比较麻烦,但是没你想想的那样,如果框架支持的好,化繁为简完全可能。
异步导入,简单的话,用回调函数就可以,复杂一点的,jsi基础类库中有任务队列支持。

jsi2的装饰框架,全是异步安需装载的。有一个队列,收集信息,装载资源,执行装饰行为(深度优先),如果有兴趣你可以翻翻代码。
0 请登录后投票
   发表时间:2007-03-30  
Readonly 写道
像bindows,qooxdoo用一个splash window先显示loading %,一次读入所有的js,可以被分到哪一种?


你自己都说了,一次装载全部,那就不是安需装载了:)

这几个框架没有研究过,不清楚,居然可以显示loading %,那么异步装载的可能性大点吧。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics