defer与async在＜script＞标签上的作用

最新推荐文章于 2023-01-09 23:20:20 发布

前小端ya

最新推荐文章于 2023-01-09 23:20:20 发布

阅读量139

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_68117827/article/details/126684450

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="example1.js"></script>
    <script defer src="example2.js"></script>
</head>
<body>
    
</body>
</html>

使用原因：

由于代码从上到下依次执行，如果将<script>标签放到<head>标签中引入外部js文件时，会阻塞<body>中DOM的生成，则会导致页面一打开时会出现长时间空白页。为了防止该现象产生便引入了defer和async属性。

共同点：

defer和async两者都是异步执行js文件的方式。

区别：

1.defer：

在script标签上使用defer，表示该<script>标签引入的外部js会立即下载但会推迟执行，直到代码走完</html>时才会执行。在新H5中明确规定，defer的执行顺序按照书写顺序执行，并且两者皆是在DOMContentLoaded事件之前执行，但在实际情况中并不按照该顺序执行。async在加载脚本的

目前支持defer属性的是从IE4，Firefox3.5，Safari5，Chrome7开始的。

在XHTML中的书写形式应为 "defer"="defer", 不能只写defer单个