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


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 相关文章推荐
100个不能错过的实用JS自定义函数
Mar 05 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
node后端服务保活的实现
Nov 10 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 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
解析isset与is_null的区别
2013/08/09 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
python3 爬取图片的实例代码
2018/11/06 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
关于Java finally的面试题
2016/04/27 面试题
医生见习报告范文
2014/11/03 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
MySQL 全文索引使用指南
2021/05/25 MySQL