5种JavaScript脚本加载的方式


Posted in Javascript onJanuary 16, 2017

javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行。在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题。

当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知javaScript是否会修改页面内容。因此,这时浏览器会停止处理页面,先执行javaScript代码,然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加在javaScript的过程中(即外链 javaScript),浏览器必须先花时间下载外链文件中的代码,然后解析并执行它。在这个过程中,页面渲染和用户交互完全被阻塞了。

也就是说:每当浏览器解析到<script>标签(无论内嵌还是外链)时,浏览器会(一根筋地)优先下载、解析并执行该标签中的javaScript代码,而阻塞了其后所有页面内容的下载和渲染。

方式一:惯例的做法

最传统的方式是在head标签内插入<script>标签。

然而这种常规的做法却隐藏着严重的性能问题。根据上述对<script>标签特性的描述,我们知道,在该示例中,当浏览器解析到<script>标签时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,这意味着,其后的test.css样式文件和<body>标签都无法被加载,由于<body>标签无法被加载,那么页面自然就无法渲染了。因此在该javaScript代码完全执行完之前,页面都是一片空白。

<script type="text/javaScript" src="example.js"></script>

方式二:经典的做法

既然<script>标签会阻塞其后内容的加载,那么将<script>标签放到所有页面内容之后不就可以避免这种糟糕的状况了吗? 将所有的<script>标签尽可能地放到<body>标签底部,以尽量避免对页面其余部分下载的影响。

在IE8+浏览器上已经实现了脚本并行下载,但在某些浏览器中(即使脚本文件放到了<body>标签底部),页面中脚本仍是一个接着一个加载的。所以我们需要下一个方法,即:动态加载脚本。

方式三:动态脚本

通过文档对象模型(DOM),我们可以几乎可以页面任意地方创建。

<script type='text/javascript'>
  var script = document.createElement('script');
  script.type = 'text/javaScript';
  script.src = 'file1.js';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

上述代码动态创建了一个外链file1的<script>标签,并将其添加到<head>标签内。这种技术的重点在于:

无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程(包括脚本加载)。
然而这种方法也是有缺陷的。这种方法加载的脚本会在下载完成后立即执行,那么意味着多个脚本之间的运行顺序是无法保证的(除了Firefox和Opera)。当某个脚本对另一个脚本有依赖关系时,就很可能发生错误了。比如,写一个jQuery代码,需要引入jQuery库,然而你写的jQuery代码文件很可能会先完成下载并立即执行,这时浏览器会报错——‘jQuery未定义'之类的,因为此时jQuery库还未下载完成。于是做出以下改进:

<script type='text/javascript'>
  function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>

上述代码改进的地方就是增加了一个回调函数,该函数会在相应脚本文件加载完成后被调用。这样便可以实现顺序加载了,写法如下(假设file2依赖file1,file1和file3相互独立):

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});

file2会在file1加载完后才开始加载,保证了在file2执行前file1已经准备妥当。而file1和file3是并行下载的,互不影响。 虽然loadScript函数已经足够好,但还是有些不尽人意的地方——通过分析这段代码,我们知道,loadScript函数中的顺序加载是以脚本的阻塞加载来实现的(正如上述红字部分指出的那样)。而我们真正想实现的是——脚本同步下载并按相应顺序执行,即并行加载并顺序执行。

方式四:LABjs

LABjs库能帮我们真正地实现“并行加载与顺序执行”,推荐写法如下:

<script src="LAB.js"></script>
<script type="text/javaScript">

$LAB


 .script("script1.js").wait()


 .script("script2-a.js")


 .script("script2-b.js")


 .wait(function(){



 initScript1();



 initScript2();


 })


 .script("script3.js")


 .wait(function(){



 initScript3();


 });
</script>

方式五:requireJS

<script src="require.js"></script>
<script type="text/javaScript">

require([



"script1.js",



"script2-a.js",



"script2-b.js",



"script3.js"


 ],


 function(){



initScript1();



initScript2();



initScript3();


 }


);
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 精粹笔记
May 09 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
WebPack基础知识详解
Jan 16 #Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 #Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 #Javascript
函数四种调用模式以及其中的this指向
Jan 16 #Javascript
js实现导航栏中英文切换效果
Jan 16 #Javascript
Bootstrap面板使用方法
Jan 16 #Javascript
codeMirror插件使用讲解
Jan 16 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
javascript实现留言板功能
2020/02/08 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
python实现C4.5决策树算法
2018/08/29 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Python的logging模块基本用法
2020/12/24 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
护士演讲稿范文
2014/01/05 职场文书
商场总经理岗位职责
2014/02/03 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
学生会招新宣传语
2015/07/13 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
Redis基本数据类型String常用操作命令
2022/06/01 Redis