javascript按顺序加载运行js方法


Posted in Javascript onDecember 01, 2017

首先如果大家对JS动态加载有不理解的地方可以参阅:

如何你的 script 上没有任何 异步,阻塞 等标注:

浏览器会异步加载 javascript 文件,但是会按照引用文件中的书写顺序从上到下执行解析 javascript

Defer属性标记

defer是html4.0中定义的,该属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。

也就是说defer属性的 script 就类似于将 script 放在body中的加载 效果一致.

但是defer属性在各个浏览器中支持程度有点不同,就是说,有的浏览器不完全支持.

Async属性标注

async是HTML5新增的属性, 大部分先进支持该属性的.
该属性的作用是让脚本能异步加载,也就是说当浏览器遇到async属性的 script 时浏览器加载css一样是异步加载的

javascript 动态加载js文件

原理很简单,创建一个 script 节点,给节点赋予 script 的属性,然后 append 到 dom 的 head 标签中.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

如果我们同时加载多个 javascript 文件

loadJS('a.js');
loadJS('b.js');

上面的效果是,a.js 和 b.js 文件会被异步同时加载,如果 b.js 文件比 a.js 文件小的话,很可能先加载执行 b.js ,完全不会按照书写结果加载执行

所以,如果你的 b.js 文件有依赖 a.js 的东西,那么就会报错,因为解释执行b.js 的时候,a.js 还在加载中.

控制javascript 加载执行顺序

我们对代码做如下改进

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

通过script 节点上的 onload 和 onreadystatechange 属性来监听节点 src 是否加载完成

如果成功,调用回调函数 success();

我们在调用此方法的时候,可以通过 loadJS 回调函数来知道当前节点已经加载完成,然后在回调函数里继续加载其他 script 文件

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

通过上面的方法加载,是一种同步阻塞加载, a.js 加载完成后才会加载执行 b.js 文件.

如果你的 javascript 文件没有相互依赖关系,不要使用这种方法.

Javascript 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
JS作用域深度解析
Dec 29 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 #Javascript
javascript Function函数理解与实战
Dec 01 #Javascript
React Native react-navigation 导航使用详解
Dec 01 #Javascript
分析JS单线程异步io回调的特性
Dec 01 #Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 #Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 #Javascript
利用babel将es6语法转es5的简单示例
Dec 01 #Javascript
You might like
php数组指针操作详解
2017/02/14 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
Python在图片中添加文字的两种方法
2017/04/29 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
django缓存配置的几种方法详解
2018/07/16 Python
django使用xadmin的全局配置详解
2019/11/15 Python
opencv3/C++ 平面对象识别&透视变换方式
2019/12/11 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python可迭代对象去重实例
2020/05/15 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
50岁生日感言
2014/01/23 职场文书
老人祝寿主持词
2014/03/28 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
总经理检讨书范文
2015/02/16 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
借条如何写
2015/05/26 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
关于感恩的作文
2019/08/26 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python