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 标签。<script>
标签,具有两个属性,async
异步加载
defer
延迟加载。
<script>
当
script
标签 放在 head
中,并且这个 script
标签只有 src
属性引入外部 js 文件的情况下,html 文件开始渲染,直到命中 script
标签,此时解析将停止,并发出一个请求获取该文件并执行。执行结束之后继续渲染 html 标签。<script async>
使用
async
会在 html 解析期间下载文件,并在下载完成后暂停 html 的解析,执行下载的外部 js 文件。直接后继续解析 html<script defer>
它和
async
的区别是,同样在 html 解析期间下载外部的 js 文件,但是下载完成后不会立即执行 js 脚本文件,而是等到 html 解析完成后才执行它。 即在 DOMContentLoaded
之间执行已下载的 外部 js 文件。什么场景下使用
async
或 defer
呢?- 如果 script 是模块化,并且不依赖于任何脚本,那么使用 async
- 如果脚本依赖于或者被另一个脚本依赖,那么使用defe
当把
script
脚本放在 body
标签内就不用解释了吧。和 <script defer>
很像不是么?