延迟加载js 的方式
直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载及执行分过程中，会阻塞后续的DOM渲染。
浏览器会按照顺序来执行，如果js 在dom元素上面引用执行(如A)，js 报错，dom 会显示空白或者是一直处于加载中的状态。这样用户体验很不好。
延迟加载 async（异步）, defer（推迟）
eg：
<!DOCTYPE html>
<html>
<head>
<title><title>
<script src="script.js"></script> // A 在这里操作获取id='box' 会显示null
<head>
<body>
<div id=“box” > test </div>
<script src="script.js"></script> // B 在里能操作获取id='box'
</body>
</html>
defer: 等html 全部解析完成，才会执行js代码，顺次执行js脚本。 <script defer src="script.js"></script> js 无论放哪里都可以。多个js文件都是按照顺序执行的，都要等页面加载出来了，才执行js
async： async和html 解析同步的（一起的），不是顺次执行js脚本（谁先加载完谁先执行）。如果两个js 文件存在依赖关系，就不能用async。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）