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


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 相关文章推荐
JS烟花背景效果实现方法
Mar 03 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 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
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php实现短信发送代码
2015/07/05 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
javascript自启动函数的问题探讨
2013/10/05 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
自荐信格式范文
2013/10/07 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
投资意向协议书
2015/01/29 职场文书
工作犯错保证书
2015/05/11 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python