HTML5 中的新属性 async和defer区别

浏览器支持:

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async defer 属性。

简述:

<script async src="common.js"></script>

async 脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)

<script defer src="index.js"></script>

defer 脚本将在页面完成解析时执行,但 index.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

<script src="index.js"></script>

没有 deferasync,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 中的新属性 async和defer区别</title>
</head>
<body>
    <script async src="./common.js"></script>
    <script defer src="./index.js"></script>
    <script>
        console.log(1111);
    </script>
</body>
</html>

运行结果:

1111
index.js
common.js
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容