JavaScript 的 defer 与 async

当解析器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。但是我们可以将脚本标记为 defer，这样就不会停止文档解析，等到文档解析完成才执行脚本，也可以将脚本标记为 async，以便由其他线程对脚本进行解析和执行。

三者之间的区别？

script

当解析器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。

defer script

当解析器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。

async script

当解析器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。

什么情况下使用 defer 和 async？

如果脚本不依赖于任何脚本，并不被任何脚本依赖，那么则使用 defer。
如果脚本是模块化的，不依赖于任何脚本，那么则使用 async。

需要注意的地方

async 对于内联脚本没有作用。
defer 不应该在内联脚本上使用。从 Gecko 1.9.2 开始，内联脚本的 defer 会被忽略，但是在 Gecko 1.9.1 中，如果定义了 defer 属性，即使内联脚本也会被延迟执行。
defer 的脚本是按照声明顺序执行的。而 async 的脚本不同，只要脚本下载完成，将会立即执行，未必会按照声明顺序执行。
IE9 及以下版本的浏览器，defer 的脚本也未必会按照声明顺序执行。
如果同时使用 defer 和 async，则会默认使用 async，忽略 defer。

转载于:https://www.cnblogs.com/libin-1/p/5904042.html

JavaScript 的 defer 与 async相关推荐

浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
defer和async属性详解
script标签的加载是同步执行的,也就是说如果将JavaScript文件放在head标签中时,必须等所有JavaScript代码下载.解析和解释完毕后,才能开始渲染页面 (页面在解析到body标签时 ...
defer和async的原理与区别
上一篇刚转载了一篇有关于网站性能优化的文章,其中提及到了页面的加载和渲染的过程,提到了defer和async的相关区别,但是本人在此之前并没有深究其中的区别. defer和async是script标签 ...
script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
html5 js阻塞加载,js无阻塞加载和defer、async详解_白峰_前端开发者
无阻塞加载把下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标 ...
html5中defer的属性,HTML5中defer和async的比较
在网站页面中,通常需要引入外部js资源,然而外部的js资源可能导致DOM阻塞,影响页面加载速度.通过异步或者延迟执行js,可以做到引用外部js资源而不阻塞DOM的目的.用法是直接在script标签中使 ...
script 脚本标签中 defer 和 async （延缓和异步）
原文章:https://segmentfault.com/q/1010000000640869 本文章讲解几个点: <script> 标签中的 defer 和 async 是什么: 使 ...
JS中script标签defer和async属性的区别
向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解 ...
script 标签中的defer 和 async 属性
浏览器在解析 HTML 的时候,如果遇到一个没有任何属性的 <script> 标签 ,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完毕 ...