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

冷不防 2022-09-21 14:24 252阅读 0赞

首先，看下面代码，当执行html文件时候，首先会加载哪一个JS？

<script type="text/javascript" src="demo1.js" async></script>
    <script type="text/javascript" src="demo2.js"></script>

根据JavaScript的API说明，async属性是，立即下载script，一旦脚本可用，则会异步执行。理论上的结果是当运行到demo1.js的时候，立即下载和异步先执行demo1.js。

但是，测试结果显示，是先执行demo2.js。为什么呢？（结果就不粘贴出来了，自己去测试一下，绝对是这个效果。）

原来，这个异步加载的方式并不是我们想象中的那样子，先看下面的<script> 标签引入脚本的三种情况：

立即执行

<script src="demo1.js">
    <script src="demo2.js">

顺序：保证先后顺序。解析：HTML 解析器遇到它们时，将阻塞（取停止解析），待脚本下载完成并执行后，继续解析标签之后的文档。

推迟执行

<script defer src="demo1.js">
    <script defer src="demo2.js">

顺序：保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载），待文档解析完成之后，执行脚本。

尽快执行

<script async src="demo1.js">
    <script async src="demo2.js">

顺序：不保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载，一旦下载完成，立即执行它），并继续解析之后的文档。

这个加载循序就个非阻塞的概念有关联了，总结来说就是，当<script>标签存在async/defer的时候，这个script将调用非阻塞异步加载方式，所谓的非阻塞异步加载方式，用第一个例子来说明，当执行到<script src="demo1.js" async></script> 这一行代码的时候，把demo1.js挂起，异步加载demo1.js，继续运行下面的代码，就是运行<script src="demo2.js"></script>，而异步加载完demo1.js后，立即执行（defer和async 的区别就是，async异步加载完立即执行，defer异步加载完延迟执行）

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关异步加载和延迟加载

1.异步加载的方案：动态插入script标签 2.通过ajax去获取js代码，然后通过eval执行 3.script标签上添加defer或者async

淩亂°似流年/ 2022年07月15日 09:40/ 0 赞/ 440 阅读

相关 JavaScript异步加载

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的java

今天药忘吃喽~/ 2022年07月14日 14:19/ 0 赞/ 264 阅读

相关 JS异步加载和延迟加载

1、异步加载的方案：动态插入script标签 1）通过ajax去获取js代码，然后通过eval执行 2）script标签上添加defer或者async属性

绝地灬酷狼/ 2022年06月08日 06:17/ 0 赞/ 652 阅读

相关 Javascript 异步加载详解

本文总结一下浏览器在 javascript 的加载方式。关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execu

向右看齐/ 2022年06月07日 06:15/ 0 赞/ 251 阅读

相关 Javascript 异步加载详解

本文总结一下浏览器在 javascript 的加载方式。关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execu

约定不等于承诺〃/ 2022年06月04日 01:47/ 0 赞/ 325 阅读

相关 JavaScript异步加载

同步加载的问题　　默认的js是同步加载的，这里的“加载”可以理解成是解析、执行，而不是“下载”，在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻

深碍√TFBOYSˉ_/ 2022年06月04日 01:45/ 0 赞/ 284 阅读

相关 JavaScript 异步加载JS

文章目录 script 标签属性 XMLHttpRequest 脚本注入动态创建 script 元素 LazyLo

╰半夏微凉°/ 2022年05月28日 00:15/ 0 赞/ 313 阅读

相关 JavaScript-异步加载

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。 js 之所以要同步执行，是因为 js 中可能有输出

分手后的思念是犯贱/ 2022年05月26日 09:48/ 0 赞/ 260 阅读

相关 JavaScript异步加载

javascript 异步加载的三种方案 1. defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。 2. async 异步加载，加载完就执行，as

迈不过友情╰/ 2022年05月19日 02:48/ 0 赞/ 286 阅读