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


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 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
Javascript读取上传文件内容/类型/字节数
Apr 30 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 实例化类的一点摘记
2008/03/23 PHP
Smarty安装配置方法
2008/04/10 PHP
PHP积分兑换接口实例
2015/02/09 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python中的filter()函数的用法
2015/04/27 Python
浅谈python中的占位符
2017/11/09 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Python基于execjs运行js过程解析
2020/11/27 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
共产党员公开承诺书
2014/03/25 职场文书
2014年教学工作总结
2014/11/13 职场文书
讲文明倡议书
2015/04/29 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
工厂员工辞职信范文
2015/05/12 职场文书