理解＜script＞标签的 defer 和 async 属性

我爱学习yq

于 2023-12-01 08:04:32 发布

阅读量429

点赞数 5

本文链接：https://blog.csdn.net/m0_74801194/article/details/134725650

版权

defer和async都是用于控制浏览器下载和执行JavaScript的方式的属性。

defer属性的效果是将JavaScript文件的下载放在HTML文件下载完成之后，但在HTML页面的解析过程中，会优先执行JavaScript的下载和解析，但不会中断HTML的解析和渲染。也就是说，当HTML解析完成后，JavaScript文件才会运行，而不会阻塞DOM的解析和渲染。

async属性的效果是让JavaScript文件的下载和执行异步进行，也就是说，JavaScript文件的下载和执行不会阻塞HTML页面的解析和渲染，但这也会导致JavaScript文件的执行时间不可预测，因为它的下载和执行是在HTML页面渲染的同时进行的。在使用async的情况下，无法保证JavaScript文件的执行顺序，所以在涉及到依赖关系的JavaScript代码中使用async会带来问题。

以下是具体的代码例子：

使用defer属性：

<!DOCTYPE html>
<html>
 <head>
    <title>Defer Example</title>
    <script defer src="defer.js"></script>
 </head>
 <body>
    <h1>Hello World</h1>
 </body>
</html>

defer.js文件内容如下：

alert("defer script is executed.");

使用async属性：

<!DOCTYPE html>
<html>
 <head>
    <title>Async Example</title>
    <script async src="async.js"></script>
 </head>
 <body>
    <h1>Hello World</h1>
 </body>
</html>

async.js文件内容如下：

alert("async script is executed.");

需要注意的是，以上例子中的JavaScript文件都是简单的弹窗提示，实际应用中可能会涉及到更加复杂的操作。同时，以上例子中的defer和async属性都是在单个JavaScript文件的情况下使用的，如果在一个页面中有多个JavaScript文件，不同的文件使用不同的属性会带来不可预测的效果。因此，在使用defer和async属性时，需要根据具体情况进行慎重选择。

我爱学习yq

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
理解＜script＞标签的 defer 和 async 属性

async属性的效果是让JavaScript文件的下载和执行异步进行，也就是说，JavaScript文件的下载和执行不会阻塞HTML页面的解析和渲染，但这也会导致JavaScript文件的执行时间不可预测，因为它的下载和执行是在HTML页面渲染的同时进行的。同时，以上例子中的defer和async属性都是在单个JavaScript文件的情况下使用的，如果在一个页面中有多个JavaScript文件，不同的文件使用不同的属性会带来不可预测的效果。
复制链接

扫一扫