• 技术文章 >web前端 >js教程

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

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












    测试示例:
    地址:

    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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:比较不错的一款图片广告效果_图象特效 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文聊聊node后端路由自动加载• 一文浅析node中如何使用消息队列• 一文详解Node中express的身份认证• Angular学习之聊聊生命周期• 【翻译】使用自定义hooks对React组件进行重构
    1/1

    PHP中文网