阅读量:0
HTML5中的`
标签可以通过设置async或defer属性来实现异步加载。async表示脚本在加载完成后立即执行，而defer`表示脚本会在页面解析完成后执行。HTML5引入了<script>标签的async和defer属性，以优化页面加载性能并减少脚本执行对页面渲染的阻塞，这些属性提供了异步加载外部JavaScript文件的能力，使得脚本下载和执行不再需要等待整个DOM解析完成。
async 属性
async属性表示脚本应该尽快被下载，但不应阻止页面中的其他操作，这意味着一旦脚本被下载完成，它将立即执行，而不管DOM是否解析完毕，使用async属性的脚本可能会在页面的其他部分渲染之前或之后执行，取决于网络条件和脚本的下载速度。
<script async src="siteScript.js" onload="myInit()"></script>
defer 属性
与async不同，defer属性确保脚本会按照它们在HTML中出现的顺序执行，但是会在DOM解析完成后才执行，这避免了因脚本执行导致的布局偏移（FOUC）问题，多个带有defer属性的脚本会保证按顺序执行。
<script defer src="siteScript.js" onload="myInit()"></script>
async 与 defer 的区别
| 特性 | async | defer |
| 执行时机 | 下载完成后立即执行 | DOM解析完成后执行 |
| 执行顺序 | 可能不会按页面出现顺序执行 | 保证按页面出现顺序执行 |
| 适用场景 | 适用于不需要依赖DOM的脚本 | 适用于需依赖DOM且需按顺序执行的脚本 |
浏览器支持情况
大多数现代浏览器都支持async和defer属性，Firefox从版本3.6开始支持这两个属性，而IE从版本9开始支持defer属性，但不支持async。
FAQs
Q1: 如果我的脚本依赖于页面的DOM元素怎么办？
A1: 如果脚本依赖于页面的DOM元素，建议使用defer属性，这样可以确保脚本在所有DOM元素解析完成后执行，避免因DOM未完全加载导致的运行错误。
Q2:async和defer属性会影响脚本的加载顺序吗？
A2:async脚本不保证加载顺序，它们一旦下载完成就会立即执行，可能导致不按页面中出现的顺序执行，而defer脚本则保证按页面中出现的顺序执行，但所有defer脚本都会在DOM解析完成后才执行。
HTML5 script元素async和defer的使用介绍
在HTML5中，<script>元素可以用于嵌入或引用JavaScript代码。async和defer是<script>元素的两个属性，用于控制JavaScript脚本的加载和执行方式。
async属性
作用：使脚本异步加载，但不保证执行顺序。
用法：在<script>标签中添加async属性。
特点：
脚本在下载时不会阻塞HTML的解析。
脚本执行顺序不确定，由浏览器决定。
适用于那些不需要按照特定顺序加载和执行的脚本。
defer属性
作用：使脚本在文档解析完成后按照在文档中出现的顺序执行。
用法：在<script>标签中添加defer属性。
特点：
脚本在下载时不会阻塞HTML的解析。
脚本会在文档解析完成后按照它们在文档中出现的顺序执行。
适用于那些需要按照特定顺序加载和执行的脚本，如初始化依赖。
对比
async和defer都允许脚本异步加载，但执行顺序不同。
async适用于不关心执行顺序的脚本。
defer适用于需要按照特定顺序执行的脚本。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Script Loading Example</title> </head> <body> <script src="script1.js" async></script> <script src="script2.js" defer></script> <p>Here is some content.</p> </body> </html>
在上面的示例中，script1.js将异步加载并执行，而script2.js将在文档解析完成后按照它们在文档中出现的顺序执行。
使用async和defer属性可以有效控制JavaScript脚本的加载和执行，提高页面加载速度和用户体验，根据脚本的实际需求选择合适的属性，以确保脚本能按预期工作。
