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

何谓安需装载?
    脚本程序一般都是下载后执行,当脚本库非常庞大时,一次性下载起来非常费时,传统的解决方式是,按功能模块把脚本写在不同的文件中,页面上手动加入 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

时间: 2024-08-20 06:45:04

脚本安需导入(装载)的三种模式的对比_javascript技巧的相关文章

IIS下PHP的三种配置方式对比_php技巧

在Windows IIS 6.0下配置PHP,通常有CGI.ISAPI和FastCGI三种配置方式,这三种模式都可以在IIS 6.0下成功运行,下面我就讲一下这三种方式配置的区别和性能上的差异.   1.CGI(通用网关接口/Common Gateway Interface)一般是可执行程序,例如EXE文件,和WEB服务器各自占据着不同的进程,而且一般一个CGI程序只能处理一个用户请求.这样,当用户请求数量非常多时,会大量占用系统的资源,如内存.CPU时间等,造成效能低下.   2.ISAPI(

探讨JavaScript中声明全局变量三种方式的异同_javascript技巧

变量及变量声明是一门语言最基本的概念,初学者都会很快掌握.JavaScript中声明变量也是如此,很简单var(关键字)+变量名(标识符). 方式1 var test;var test = 5;需注意的是该句不能包含在function内,否则是局部变量.这是第一种方式声明全局变量. 方式2 test = 5;没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test.即使该语句是在一个function内,当该function被执行后test变成了全局变量. 方式3 window

Javascript定义类(class)的三种方法详解_javascript技巧

将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越庞大的项目. Javascript代码的复杂度也直线上升.单个网页包含10000行Javascript代码,早就司空见惯.2010年,一个工程师透露,Gmail的代码长度是443000行! 编写和维护如此复杂的代码,必须使用模块化策略.目前,业界的主流做法是采用"面向对象编程".因此,Ja

JS中动态创建元素的三种方法总结(推荐)_javascript技巧

1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

深入浅析JavaScript中对事件的三种监听方式_javascript技巧

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果: <table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>

JavaScript中this的9种应用场景及三种复合应用场景_javascript技巧

[场景1]全局环境中的this指向全局对象 this.a = 10; alert(a);//10 b = 20; alert(this.b);//20 var c = 30; alert(this.c);//30 [场景2]对象内部函数的this指向调用函数的当前对象 var a = 10; var bar = { a: 20, test: function(){ alert(this.a); } } bar.test();//20 [场景3]全局环境函数的this指向全局对象 var a =

第七篇Bootstrap表单布局实例代码详解(三种表单布局)_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

js三种排序算法分享_javascript技巧

复制代码 代码如下: /** * 值交换操作 * arr 被操作的数组 * i 被操作元素索引值 * j 被操作两元素的距离 */ function refer(arr, i, j){ var change = (arr[i] - arr[i - j]) < 0 ? true : false, value; if (change) { value = arr[i]; arr[i] = arr[i - j]; arr[i - j] = value; return arguments.callee(

JavaScript中实现继承的三种方式和实例_javascript技巧

javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的继承方式,继承与被继承的双方都是"类",代码如下: 首先定义一个父类(或超类): function Person(name){ this.name=name; } Person.prototype.getName=function(){ retu