js的defer和async区别
时间: 2024-04-13 14:27:09 浏览: 10
defer和async都是用于控制脚本加载和执行的属性,用于解决JavaScript脚本对页面渲染的阻塞问题。
1. defer属性:当浏览器解析到带有defer属性的脚本标签时,会将该脚本的加载推迟到文档解析完毕后,在DOMContentLoaded事件触发之前执行。多个带有defer属性的脚本会按照它们在文档中出现的顺序依次执行。defer属性保证了脚本的执行顺序,并且在执行脚本之前不会阻塞页面渲染。
2. async属性:当浏览器解析到带有async属性的脚本标签时,会异步加载该脚本,并在加载完成后立即执行,不会阻塞页面的解析和渲染。多个带有async属性的脚本会并行加载,加载完成即执行,执行顺序不受保证。因此,如果多个异步脚本之间有依赖关系,可能会导致执行顺序错误或出现其他问题。
总结区别:
- defer属性保证脚本按照在文档中出现的顺序依次执行,而async属性则没有这种保证。
- 使用defer属性加载的脚本会在DOMContentLoaded事件之前执行,而使用async属性加载的脚本在加载完成后立即执行。
- defer属性不会阻塞页面的解析和渲染,而async属性加载的脚本在加载期间会阻塞页面的解析。
根据实际需求,选择合适的属性来控制脚本的加载和执行顺序,以及对页面渲染的影响。
相关问题
script 的 defer 和 async 的应用场景
`defer` 和 `async` 都是用来控制在浏览器解析 HTML 文档时加载 JavaScript 文件的方式。
`defer` 属性用于延迟脚本的执行,直到文档解析完成。这意味着,当浏览器解析到带有 `defer` 属性的脚本标签时,它会继续解析 HTML,同时异步下载脚本文件。一旦 HTML 解析完成,浏览器会立即执行脚本文件。因此,`defer` 适用于需要在文档解析完成后才能执行的脚本。
```
<script defer src="deferred.js"></script>
```
`async` 属性用于异步加载脚本文件。当浏览器解析到带有 `async` 属性的脚本标签时,它会在后台异步下载脚本文件,同时继续解析 HTML。一旦下载完成,浏览器立即执行脚本文件,不管 HTML 是否解析完成。因此,`async` 适用于不依赖 HTML 解析的脚本。
```
<script async src="async.js"></script>
```
需要注意的是,虽然 `defer` 和 `async` 都可以异步加载脚本,但是它们的执行顺序是不同的。`defer` 保证脚本文件的执行顺序与它们在 HTML 中的顺序一致,而 `async` 则不保证脚本文件的执行顺序。因此,如果多个脚本文件之间有依赖关系,应该使用 `defer` 来确保它们的执行顺序。
script中defer和async
b'script\xe4\xb8\xaddefer\xe5\x92\x8casync'是关于JavaScript代码加载的两种策略。defer是让代码在页面加载完毕后再执行,而async是让代码在下载完成后立即执行。两者的差别在于执行的时间点不同,使用时需要根据具体需求来选择。