defer async优先级
时间: 2024-06-06 09:08:26 浏览: 15
在浏览器中,defer和async都可以使页面的JavaScript异步加载,提高页面加载速度。它们的优先级如下:
1. defer:defer属性告诉浏览器,要等到整个页面解析完毕后再执行JavaScript代码。defer会保证JavaScript代码按照它们在页面中出现的顺序执行,并且在DOMContentLoaded事件之前执行。如果有多个defer脚本,它们会按照它们在页面中出现的顺序执行。defer的优先级高于async。
2. async:async属性告诉浏览器,要异步加载JavaScript文件,不会阻塞页面的解析和渲染。当浏览器加载到async脚本时,会立即开始下载,并继续解析页面。然而,async脚本的执行顺序是不确定的,它们可能会在页面的任何地方执行,并且可能在DOMContentLoaded事件之前或之后执行。如果有多个async脚本,它们的执行顺序是不确定的。async的优先级低于defer。
相关问题
defer和async
defer和async是用于控制脚本加载和执行时机的属性。它们的主要区别在于执行时机和脚本之间的依赖关系。
defer属性表示脚本的加载和执行是延迟的,即在HTML解析完毕后执行。它不会阻塞后续HTML的解析,但会按照脚本在HTML中的顺序执行。defer适用于需要保证脚本按照顺序执行的情况,因为它能够保证脚本之间的变量依赖关系。
async属性表示脚本的加载和执行是异步的,即在下载完成后立即执行。它也不会阻塞后续HTML的解析,但无法保证脚本的执行顺序,谁先下载完成谁先执行。因此,如果脚本之间存在依赖关系,不推荐使用async。
需要注意的是,async和defer都只适用于外联脚本,即通过src属性引入的脚本。它们不适用于内联脚本。
综上所述,通常情况下,defer的使用频率较高,它能够保证脚本之间的变量依赖关系。而async适用于独立的脚本,且不需要考虑脚本执行顺序的情况。
#### 引用[.reference_title]
- *1* *3* [详解defer和async的原理及应用](https://blog.csdn.net/liuhe688/article/details/51247484)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [async和defer的区别?](https://blog.csdn.net/qq_44621394/article/details/126545273)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
defer和async的区别
defer 和 async 都是用于控制 JavaScript 异步执行的关键字,它们有一些区别。
defer 用于在 HTML 文件中标记一个脚本,表示该脚本需要在页面加载完成后执行,但是在 DOMContentLoaded 事件触发前执行。defer 会按照页面中脚本出现的顺序依次执行,如果多个脚本都使用了 defer,那么它们会按照在页面中出现的顺序依次执行。defer 通常用于优化页面加载性能,因为它可以让页面先加载完毕再执行脚本,避免脚本阻塞页面加载。
async 用于在 HTML 文件中标记一个脚本,表示该脚本需要在加载完成后立即执行,但是不会阻塞页面的加载。async 也会按照页面中脚本出现的顺序依次执行,但是它们的执行顺序和 DOMContentLoaded 事件触发的顺序无关。async 通常用于不需要等待其他资源加载完成就可以立即执行的脚本,比如一些统计代码、广告代码等。
总的来说,defer 和 async 都可以优化页面加载性能,但是它们的使用场景不同。如果脚本需要操作 DOM 元素,那么建议使用 defer,否则可以考虑使用 async。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)