Script 标签中 async 和 defer 属性的作用分别是什么？

最新推荐文章于 2025-03-28 10:07:58 发布

DTcode7

最新推荐文章于 2025-03-28 10:07:58 发布

阅读量792

点赞数 13

分类专栏： HTML网站开发 # 前端基础入门三大核心之html 文章标签： HTML 前端 web JavaScript 网页开发

本文链接：https://blog.youkuaiyun.com/black_cat7/article/details/140991766

版权

Script 标签中 async 和 defer 属性的作用分别是什么？

引言

在现代Web开发中，JavaScript扮演着至关重要的角色。随着Web应用变得越来越复杂，页面加载性能成为了用户体验的关键因素之一。为了优化页面加载速度，HTML提供了两种特殊的属性——async和defer，它们可以被添加到<script>标签中以控制脚本的加载和执行顺序。本文将深入探讨这两个属性的工作原理及其应用场景，旨在帮助前端开发者更好地理解并利用它们来提升网站性能。

基本概念与作用

`async`属性

基本概念：async属性告诉浏览器该脚本可以异步加载和执行，即它不会阻塞页面的解析过程。这意味着脚本可能会在文档解析完成之前或者之后执行。
作用：使用async属性可以帮助避免脚本阻塞页面渲染，从而提高页面加载速度。

`defer`属性

基本概念：defer属性同样允许脚本异步加载，但它保证脚本会在文档解析完成后按顺序执行（按照<script>标签在文档中的出现顺序）。
作用：defer属性非常适合那些依赖于DOM结构的脚本，因为它保证了脚本在DOM完全加载完毕后执行。

示例与代码示例

示例一：标准的同步脚本加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sync Script Example</title>
</head>
<body>

<h1>Hello World!</h1>

<script>
    console.log('Script executed after the DOM is fully loaded.');
</script>

</body>
</html>

示例二：使用`async`属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Async Script Example</title>

最低0.47元/天解锁文章

Script 标签中 async 和 defer 属性的作用分别是什么？

Script 标签中 async 和 defer 属性的作用分别是什么？

引言

基本概念与作用

async属性

defer属性

示例与代码示例

示例一：标准的同步脚本加载

示例二：使用async属性

`async`属性

`defer`属性

示例二：使用`async`属性