简单介绍HTML5 defer和async的区别-H5教程-PHP中文网

下面小编就为大家带来一篇浅谈 HTML5 defer和async的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在HTML页面中插入 Javascript 的主要方法，就是使用 元素。这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来，这个元素就被加入到正式的HTML规范中。HTML4.01为 定义了6个 属性 ，包括defer和async。defer和async都是可选的，且只对外部脚本文件有效。 一、当浏览器解析到script脚本，没有defer或async时：

登录后复制 浏览器会立即加载并执行指定的脚本，“立即”指在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 二、当浏览器解析到script脚本，有async时：

登录后复制 浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行（异步）。 async不保证按照脚本出现的先后顺序执行，因此，确保两者之前互不依赖非常重要，指定async属性的目的是不让页面等待两个脚本的下载和执行，从而异步加载页面其他内容，建议异步脚本不要在加载期间修改DOM。 异步脚本一定会在页面的load 事件 前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和 Chr ome。 三、当浏览器解析到script脚本，有defer时：

登录后复制 表示脚本会被延迟到文档完全被解析和显示之后再执行，加载后续文档元素的过程将和main.js的加载并行进行（异步）。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。 IE4~IE7还支持对嵌入脚本的defer属性，但IE8以及之后的版本则完全支持HTML5规定的 行为 。 IE4，Firefox 3.5，Safari 5和Chrome是最早支持defer属性的浏览器。其他浏览器胡忽略这个属性，像平常一样处理脚本，为此，把延迟脚本放在页面底部仍然是最佳选择。 蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。 此图告诉我们以下几个要点： defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）

它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的

关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用

async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行

仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

简单介绍HTML5 defer和async的区别