HTML5中的元素的async和defer属性有何区别，它们如何影响脚本加载？

HTML5中，`标签的async和defer属性用于异步加载脚本。async表示脚本在加载后立即执行，而defer`表示脚本会在文档解析完成后执行。

HTML5中的<ｓｃｒｉｐｔ>元素引入了两个重要的属性：async和defer，它们主要用于异步加载JavaScript文件，以减少页面加载时的阻塞，提高用户体验，下面将详细介绍这两个属性的使用及其区别：

1、async 属性

定义：async属性表示脚本应该立即下载，但不应妨碍页面中的其他操作，如解析HTML、执行其他脚本等。

使用示例：

     <ｓｃｒｉｐｔ async src="siteScript.js" onload="myInit()"></ｓｃｒｉｐｔ>

特点：

脚本在下载完成后会立即执行，其执行时间一定在window的load事件触发之前。

多个async脚本很可能不会按其在页面中的出现次序顺序执行。

适用场景：

当脚本之间没有依赖关系，或者脚本的执行顺序不重要时，可以使用async属性。

2、defer 属性

定义：defer属性表示脚本应该在页面解析完成后执行，且多个带有defer属性的脚本会按照它们在页面中出现的顺序依次执行。

使用示例：

     <ｓｃｒｉｐｔ defer src="siteScript.js" onload="myInit()"></ｓｃｒｉｐｔ>

特点：

脚本会在DOM解析完成后，document的DOMContentLoaded事件触发之前执行。

多个defer脚本会按照它们在HTML页面中的出现顺序依次执行。

适用场景：

当脚本之间有依赖关系，或者脚本的执行顺序很重要时，可以使用defer属性。

3、async 与 defer 的区别

执行时机：async脚本在下载完成后立即执行，而defer脚本在DOM解析完成后执行。

执行顺序：async脚本可能不会按照页面中出现的次序顺序执行，而defer脚本会按照页面中出现的次序依次执行。

适用性：async适用于脚本之间没有依赖关系的情况，而defer适用于脚本之间有依赖关系或执行顺序很重要的情况。

4、浏览器支持情况

基于Webkit的新版本浏览器：支持async和defer属性。

FireFox：从FF3.6开始支持defer和onload属性，从FF3.6开始添加了async属性。

IE：支持defer属性，但不支持async属性，从IE9开始，onload属性也将被支持。

FAQs

1、问：为什么推荐使用defer而不是async？

答：因为defer脚本会在DOM解析完成后按照页面中出现的次序依次执行，这有助于确保脚本之间的依赖关系得到满足，避免因脚本执行顺序不当导致的运行错误，而async脚本可能会打乱执行顺序，增加出错的风险。

2、问：如果一个页面同时包含async和defer脚本，它们的执行顺序是怎样的？

答：如果一个页面同时包含async和defer脚本，那么defer脚本会首先按照页面中出现的次序依次执行，而async脚本会在下载完成后立即执行，其执行时间一定在window的load事件触发之前，由于async脚本可能不会按照页面中出现的次序顺序执行，因此它们的执行顺序是不确定的。