script 标签中async 属性和defer 属性作用以及区别？

接下来我们对比下 defer 和 async 属性的区别：

其中蓝色线代表JavaScript加载；红色线代表JavaScript执行；绿色线代表 HTML 解析。

1）情况1 <scriptsrc="script.js"> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。
2）情况2 (异步下载) async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于：
- 如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。需要注意的是，这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。
3）情况3 (延迟执行) defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。
- 整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事件。

defer 与相比普通 script，有两点区别：

载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后；
在加载多个JS脚本的时候，async是无顺序的加载，而defer是有顺序的加载。

参考

转载于:https://juejin.im/post/5cb69c516fb9a0687177b4a5

script 标签中async 属性和defer 属性作用以及区别？相关推荐

script标签中async与defer的区别
script标签内未设置async或者defer时: (1)script放在<head>,会阻塞HTML代码的解析和渲染,而放在<body>底部时,不会阻塞HTML代码的解析和 ...
script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...
script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
【CSS】CSS在标签中添加多个class属性
CSS在标签中添加多个class属性 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
script标签中type为script type=text/x-template是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
script 标签中的defer 和 async 属性
浏览器在解析 HTML 的时候,如果遇到一个没有任何属性的 <script> 标签 ,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完毕 ...
浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了. 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲 ...
script标签中defer和async的区别
defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下: defer为true:延迟加载脚本,在文档完成解析完成开始执行,并且在DOMContentLoa ...

script 标签中async 属性和defer 属性作用以及区别？

script 标签中async 属性和defer 属性作用以及区别？相关推荐

最新文章

热门文章