HTML的script标签async属性与JS内部async异步代码是否有区别？

这是两个完全不同应用场景下的异步控制方案，本质没有关联，核心差异如下：

1. <script> 标签的 async 属性：浏览器层的脚本加载控制 #

这是HTML规范提供的能力，作用是控制外部JS脚本的加载行为：

• 默认不带async的script标签是同步加载：浏览器遇到标签时会暂停HTML解析，先去下载对应的JS文件，下载完成后立刻执行，执行结束才会继续解析HTML，很容易阻塞页面渲染。
• 加了async属性的script标签是异步加载：浏览器会在后台下载JS文件，不影响正常的HTML解析渲染，等文件下载完成后再暂停解析去执行脚本。
  对应的示例代码：

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

<script async src="scripts.js"></script>
</body>
</html>

2. JS语法层面的async/await、Promise、回调：语言层的异步逻辑控制 #

这是JavaScript原生提供的语法能力，用来处理代码运行过程中的异步任务（比如接口请求、定时器、本地文件读写等IO操作），避免这类需要等待结果的任务卡住主线程的其他代码执行。
你给出的示例里的async关键字是用来声明异步函数的，异步函数默认返回一个Promise对象，不能直接拿到函数返回值，需要配合.then或者await使用：

const friendlyFunction = async ()=> {
    return `Hello`
}

// 直接打印拿到的是Promise实例，不是返回值"Hello"
console.log(friendlyFunction())

// 两种方式获取返回值
// 方式1：用.then
friendlyFunction().then(res => console.log(res)) // 输出Hello
// 方式2：在其他async函数中用await
const getResult = async () => {
  const res = await friendlyFunction()
  console.log(res) // 输出Hello
}
getResult()

核心差异总结 #

• 作用层级不同：script标签的async是浏览器/HTML层面的资源加载规则，只负责控制外部JS文件的下载、执行时机；JS的async是编程语言层面的语法，负责控制JS代码内部的异步任务调度。
• 解决的问题不同：script async用来解决页面加载时脚本阻塞DOM渲染的性能问题；JS异步语法用来解决代码执行时IO任务阻塞主线程的逻辑问题。
• 互相独立：哪怕你不用script async属性，脚本内部也可以正常使用async/await写异步逻辑；加了script async属性，也不影响脚本内部写同步或者异步代码。

内容的提问来源于stack exchange，提问作者Masudalimran