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


Posted in Javascript onJune 24, 2007

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

安需装载的困境:
      早期安需装载(即时同步按需装载)有一个致命的弱点,浏览器阻塞问题。当按需装载某些类库时,通常通过XMLHttpRequest同步装载脚本文件实现,这种情况下,在资源下载完成之前,浏览器将停止响应用户事件、停止页面重画操作。如果网速很慢,这段时间将非常让人讨厌,就像是死机似的。

      以前的解决办法是,将常用类库资源直接打包到框架文件中,而按需导入就成了一个宣传的幌子,没有太多实际的价值。

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

l 即时同步按需装载 (阻塞,JSI、JSVM、dojo)。

最简单的按需装载实现,通过XMLHttpRequest同步装载脚本文件实现。问题是,浏览器使用这种方式同步获取资源时将导致浏览器阻塞:停止响应用户事件、停止页面重画操作。所以,虽然编程最为简单,但是用户体验最差。

 

2 异步按需装载(无阻塞,JSI2.0+)。

异步导入,不必多做解释,用户体验好,但是因为其异步特征,处理起来比较麻烦。

 

3 延迟同步按需装载(无阻塞,JSI2.0+)。

JSI通过动态预装载功能实现的一种同步获取资源的方法,虽然也是同步,但没有阻塞,可以算时兼顾易用性和用户体验的解决方按。缺点时有一定延迟,当前脚本标签中不可用。

       

 

使用方法(JSI示例)
    以一个代码语法着色程序为例:

类库位置:org/xidea/example/code/code.js

页面位置:example/xxx.html

 

即时同步按需装载

import("org.xidea.example.code.Code"); 

var code1 = new Code(); 

code1.id = "libCode"; 

code1.decorate();

 

异步按需装载

$import("org.xidea.example.code.Code",function(Code){        

var code1 = new Code();        

code1.id = "libCode";        

code1.decorate();  

})    

延迟同步按需装载(无阻塞,JSI2.0+)。

<script>"../scripts/boot.js"></script>    

<script>    

$import("org.xidea.example.code.Code",true);    

</script>    

    

<script>    

var code1 = new Code();    

code1.id = "pageCode";    

code1.decorate();    

</script>    

测试示例: 
地址:

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

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

    示例都是jsi的默认示例,可以下载到本地运行,下载后最好能放到一个能受到网速限制的服务器上,只有这样才能看到阻塞的问题。

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

 

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

Javascript 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
javascript实现文件拖拽事件
Mar 29 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
Javascript注入技巧
Jun 22 #Javascript
Stop SQL Server
Jun 21 #Javascript
用jscript启动sqlserver
Jun 21 #Javascript
List all the Databases on a SQL Server
Jun 21 #Javascript
Display SQL Server Version Information
Jun 21 #Javascript
Display SQL Server Login Mode
Jun 21 #Javascript
List the Stored Procedures in a SQL Server database
Jun 20 #Javascript
You might like
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP制作用户注册系统
2015/10/23 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python tkinter组件使用详解
2019/09/16 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
用python对excel查重
2020/12/07 Python
给幼儿园老师的表扬信
2014/01/19 职场文书
中学生打架检讨书
2014/10/13 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android