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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
简单分析javascript中的函数
Sep 10 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
vue一步步实现alert功能
Jul 05 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
php生成EXCEL的东东
2006/10/09 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
PHP之header函数详解
2021/03/02 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
学生励志演讲稿
2014/01/06 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
初中新生军训方案
2014/05/13 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
电子商务专业自荐信
2014/06/02 职场文书
同学聚会策划方案
2014/06/06 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB