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

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

赞 (0)

相关推荐

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

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

  • pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异

    pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异

    使用matplotlib绘图时,在弹出的窗口中默认是有工具栏的,那么这些工具栏是如何定义的呢? 工具栏的三种模式 matplotlib的基础配置由运行时参数(rcParams)控制,导入matplotlib时,加载matplotlibrc文件生成默认运行时参数. 查看matplotlibrc文件可知#toolbar: toolbar2 # {None, toolbar2, toolmanager},即工具栏有三种模式None.toolbar2和toolmanager,其中默认模式为toolbar

  • VMWare网络适配器三种模式实现过程解析

    VMWare网络适配器三种模式实现过程解析

    三种模式 Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式) 在安装好vmware后,在网络连接中会有以下两块虚拟网卡: VMnet1作用于仅主机模式 VMnet8作用于NAT模式 一.桥接模式 桥接模式就是将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信.在桥接的作用下,类似于把物理主机虚拟为一个交换机,所有桥接设置的虚拟机连接到这个交换机的一个接口上,物理主机也同样插在这个交换机当中,所以所有桥接下的网卡与网卡都是交换模式的,相互可以访问而不干扰.在桥接

  • IIS下PHP的三种配置方式对比

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

  • Java中实现线程的三种方式及对比_动力节点Java学院整理

    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行体. (2)创建Thread子类的实例,即创建了线程对象. (3)调用线程对象的start()方法来启动该线程. package com.thread; public class FirstThreadTest extends Thread{ int i = 0; //重写run方法,run方法的方

  • 详解Linux系统三种模式下的简单命令

    i的编辑器: 1.三种模式:底行模式 命令模式 插入模式 命令模式: 1.从命令切换插入模式: i : 光标所在左侧输入 I 光标移动到所在行的最左则    o :光标移动的下一行(新的一行) O:光标移动的上一行(新的一行)    a :光标移动到所在行的右则输入 A:光标移动到所在行的最右则 2.复制:(n代表数字) 行: nyy n>0 单词:nyw n>0 3.粘贴:p 4.撤消到上一步骤:u 5.恢复到上一步: ctrl+r 6.替换: 替换一个字符:r 连续替换    :R 7.定

  • 浅谈.net core 注入中的三种模式：Singleton、Scoped 和 Transient

    从上篇内容不如题的文章<.net core 并发下的线程安全问题>扩展认识.net core注入中的三种模式:Singleton.Scoped 和 Transient 我们都知道在 Startup 的ConfigureServices 可以注入我们想要的服务,那么在注入的时候有三种模式可以选择,那么我们在什么时候选择什么样的模式呢? 在讲注入模式之前,我觉得很有必要了解服务生存期的概念! 服务生存期:ASP.NET Core 提供了一个内置的服务容器 IServiceProvider负责管理服

  • 关于ZeroMQ 三种模式python3实现方式

    ZeroMQ是一个消息队列网络库,实现网络常用技术封装.在C/S中实现了三种模式,这段时间用python简单实现了一下,感觉python虽然灵活.但是数据处理不如C++自由灵活. Request-Reply模式: 客户端在请求后,服务端必须回响应 server: # -*-coding:utf-8 -*- import zmq context = zmq.Context() socket = context.socket(zmq.REP) socket.bind("tcp://*:5555&qu

  • Java中线程Thread的三种方式和对比

    介绍 多线程主要的作用就是充分利用cpu的资源.单线程处理,在文件的加载的过程中,处理器就会一直处于空闲,但也被加入到总执行时间之内,串行执行切分总时间,等于每切分一个时间*切分后字符串的个数,执行程序,估计等几分钟能处理完就不错了.而多线程处理,文件加载与差分过程中 一.Java实现多线程的三种方式 1.继承Thread 通过Thread继承,并重写run方法来实现多线程,案例如下: public class ThreadPattern extends Thread { @Override p

  • docker进行数据挂载的三种模式

    docker进行数据挂载的三种模式

    目录 一.Tmpfs挂载 二.Bind mounts 四.Bind mounts-验证只读挂载 Docker 提供了三种方式将数据从宿主机挂载到 Docker容器中: volumes.bind mounts.tmpfs . Volumes是在宿主机文件系统的一个路径,默认情况下统一的父路径是 /var/lib/docker/volumes/,非 Docker 进程不能修改这个路径下面的文件,所以说 Volumes 是容器数据持久存储数据最安全的一种方式.Bind mounts 可以将文件存储在宿

随机推荐