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 相关文章推荐
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
PHP7 新增常量
2021/03/09 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
python如何为创建大量实例节省内存
2018/03/20 Python
总结python中pass的作用
2019/02/27 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
空气环保标语
2014/06/12 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
银行贷款收入证明
2014/10/17 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
家庭经济困难证明
2015/06/23 职场文书
2015最新婚礼主持词
2015/06/30 职场文书