JavaScript 异步加载，时间线

朱雀 2022-05-26 12:22 274阅读 0赞

**异步加载**

先了解下同步加载：

我们平时最常使用的就是这种同步加载形式：

`<script src="http://demo/script.js"></script> `

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。

以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。

**异步加载的三种方案**

**1. **`defer` 异步加载，等到dom文档全部解析完才会被执行。

兼容IE9以下，低版本的其他浏览器不兼容，建议使用。

使用方法：外部js

<script type="text/javascript" src="demo.js" defer="defer"></script>

内部js：

<script type="text/javascript" defer="defer">var i = 0;</script>

具体自己测试，部分方法没用！！！

**2. **aysnc 异步加载，加载完就执行，aysnc 只能加载外部脚本，不能把 Js 写在 内部。

不兼容 IE 9以下

<script type="text/javascript" src="demo.js" aysnc = "aysnc"></script>

**3.** DOM中插入。

<script type="text/javascript" >
    	
    var script = document.createElement('script');
    	
    script.type = 'text/javascript';
    	
    script.src = 'ku.js';//执行这句后就开始下载这个js文件
    	
    document.head.appendChild(script)
    	
    </script>

如果想要使用那个script里面的参数，需要等它下载完才可以，

使用

script.onload = function () {
    		
    //这里写的事件会在它下载完后执行，
    //不执行低版本IE
    		
    }

**时间线**

**1. **先创建一个Document对象，开始解析web页面。这个阶段的document.readyState = "loading" 。

**2. **遇到 link 外部 css，创建线程加载，并继续解析文档。

**3. **遇到 script 外部 js ，并且没有设置 async ， defer，浏览器加载，并阻塞，等待js 加载完成并执行该脚本，然后继续解析文档。

**4.**  遇到外部 js，并且有设置async，defer，浏览器创建线程加载，并继续解析文档。

对于async属性的脚本，脚本加载完成后立即执行。（异步加载禁止使用document.write）

**5. **遇到 img 等，先正常解析dom 结构，然后浏览器异步加载 src ，并继续解析文档。

**6. **当文档解析完成， document.readyState = 'interactive'。

**7.** 文档解析完成后，所有设置的defer的脚本会按照顺序执行。（）

**8.** 文档解析完成后，document对象触发DOMContentLoaded事件（没卵用）

**9.**当所有的脚本加载完成并执行后，img等加载完成后，document.readyState = "complete",window对象触发load 事件。

**10.**从此，以异步响应方式处理用户输入，网络事件等。页面按照你理解的顺序执行。

发表评论取消回复

表情：

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

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

相关阅读

相关 JS的异步加载和时间线

JSON理解和使用我们先说一下json： JSON是一种传输格式，它是服务端和客户端之间的数据传输的。 JSON规范代码是类似对象的数据就像把对象用单引号引起来

绝地灬酷狼/ 2022年12月01日 03:55/ 0 赞/ 138 阅读

相关 JavaScript异步加载

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

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

相关 Javascript 异步加载详解

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

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

相关 Javascript 异步加载详解

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

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

相关 JavaScript异步加载

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

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

相关 JavaScript 异步加载JS

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

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

相关 JavaScript 异步加载，时间线

异步加载先了解下同步加载：我们平时最常使用的就是这种同步加载形式： `<script src="http://demo/script.js"></script> `

朱雀/ 2022年05月26日 12:22/ 0 赞/ 275 阅读

相关 JavaScript-js加载时间线

1：创建Document对象，开始解析web页面，解析他们的html元素和其文本内容。此阶段document.readyState='loading'. 2：遇到link外部

向右看齐/ 2022年05月26日 09:52/ 0 赞/ 184 阅读

相关 JavaScript-异步加载

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

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

相关 JavaScript异步加载

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

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