html+js+控制方法执行顺序,javascript 动态加载按顺序加载运行 js

太过爱你忘了你带给我的痛 2022-10-06 10:50 269阅读 0赞

![81699303fb800582ee6b4fc86323ed24.png][]

文章目录

javascript 在浏览器中的加载是如何的?

如何你的 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 文件没有相互依赖关系,不要使用这种方法.

[81699303fb800582ee6b4fc86323ed24.png]: /images/20221005/cefa641a823a467bb292bd0e19d2a362.png

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java类加载顺序问题：动态加载与提前加载

在Java编程中，类的加载顺序主要有两种方式：静态加载和提前加载。 1. 静态加载： - Java标准库中的类，如`java.lang.Object`等，都是由JVM启

电玩女神/ 2024年11月21日 10:54/ 0 赞/ 24 阅读

相关 Java类加载执行顺序

当程序要使用某个类时，如果该类还未被加载到内存中，则系统会通过加载，连接，初始化三步来实现这个类进行初始化。一、加载加载，是指Java虚拟机查找字节流（查找.class

朱雀/ 2023年02月11日 08:58/ 0 赞/ 166 阅读

相关 html+js+控制方法执行顺序,javascript 动态加载按顺序加载运行 js

![81699303fb800582ee6b4fc86323ed24.png][] 文章目录 javascript 在浏览器中的加载是如何的? 如何你的 script 上

太过爱你忘了你带给我的痛/ 2022年10月06日 10:50/ 0 赞/ 270 阅读

相关 JavaScript 加载顺序和异步加载详解

首先，看下面代码，当执行html文件时候，首先会加载哪一个JS？ <script type="text/javascript" src="demo1.js"

冷不防/ 2022年09月21日 14:24/ 0 赞/ 252 阅读

相关 js的加载顺序

1. js 放在 `<head>`标签中会立即执行，阻塞后续资源的下载与执行。因为js有可能会操作DOM，如果不阻塞后续的资源下载，DOM的操作顺序不可控。如果外部脚

骑猪看日落/ 2022年05月16日 12:05/ 0 赞/ 204 阅读

相关 javascript加载的先后顺序

[document.ready和onload的区别----JavaScript文档加载完成事件][document.ready_onload_----JavaScript]

曾经终败给现在/ 2022年04月14日 05:59/ 0 赞/ 280 阅读

相关 JAVA类加载执行顺序

父类 public class Super { static { System.out.println("Super static

Dear 丶/ 2022年04月02日 05:53/ 0 赞/ 344 阅读

相关 JS的并行加载与执行顺序

JavaScript文件（下面简称脚本文件）需要被html文件引用才能在浏览器中运行。在html文件中可以通过不同的方式来引用脚本文件，我们需要关注的是，这些方式的具体实现和

清疚/ 2022年01月15日 19:55/ 0 赞/ 311 阅读

相关 js js加载顺序

在引入js声明中添加defer会先执行内部js文件，再执行外部js文件 defer <script src="~" type="text/javasc

╰+哭是因爲堅強的太久メ/ 2021年07月24日 17:21/ 0 赞/ 522 阅读

相关 js 页面加载顺序

![在这里插入图片描述][20191204204200680.png] ![在这里插入图片描述][20191204204211280.png] [20191204204

冷不防/ 2021年07月24日 15:58/ 0 赞/ 516 阅读