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 相关文章推荐
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
js 处理URL实用技巧
Nov 23 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
javascript中对对层的控制
2006/12/29 Javascript
Prototype使用指南之string.js
2007/01/10 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
django中瀑布流写法实例代码
2019/10/14 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
AJAX的全称是什么
2012/11/06 面试题
培训主管的职业生涯规划
2014/03/06 职场文书
《花木兰》教学反思
2014/04/09 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
食品流通安全承诺书
2014/05/22 职场文书
市场营销专业求职信
2014/06/17 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
《春酒》教学反思
2016/02/22 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
python3读取文件指定行的三种方法
2021/05/24 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL