🔄

js放在html的<body>和<head>有什么区别?

💡
Notion Tip: This page documents processes product managers should follow to ship features at Acme Corp. Helpful for getting new employees up to speed.
浏览器解析 html 文件是从上至下的,暂且不谈论 css 文件的引入,只谈 js 文件和 html dom 标签。
notion image
 <script> 标签,具有两个属性,
  1. async 异步加载
  1. defer 延迟加载。

<script>

当 script 标签 放在 head 中,并且这个 script 标签只有 src 属性引入外部 js 文件的情况下,html 文件开始渲染,直到命中 script 标签,此时解析将停止,并发出一个请求获取该文件并执行。执行结束之后继续渲染 html 标签。
notion image

<script async>

使用 async 会在 html 解析期间下载文件,并在下载完成后暂停 html 的解析,执行下载的外部 js 文件。直接后继续解析 html
notion image

<script defer>

它和 async 的区别是,同样在 html 解析期间下载外部的 js 文件,但是下载完成后不会立即执行 js 脚本文件,而是等到 html 解析完成后才执行它。 即在 DOMContentLoaded 之间执行已下载的 外部 js 文件。
notion image
什么场景下使用 async 或 defer 呢?
  1. 如果 script 是模块化,并且不依赖于任何脚本,那么使用 async
  1. 如果脚本依赖于或者被另一个脚本依赖,那么使用defe
当把 script 脚本放在 body 标签内就不用解释了吧。和 <script defer> 很像不是么?