放置位置
简介
JS引擎读代码的顺序是从上往下读的,html文件中的顺序是<head>→ <body>→ body后方。
一般原则是，CSS在前面，DOM在中间，脚本在最后面（遵循先解析再渲染再执行script这个顺序）。CSS 应当写在 head 中，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。
<head>里面
这时网页主体（body）还未加载，这里适合放一些不是立即执行的自定义函数。一般放置外部的js（尽量少放）。
尽量不要将 JS 文件放在 head 内，原因：
head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。
<body>里面
可放函数也可放立即执行的语句。若JS要和网页元素互动（比如获取某个标签的值或者给某个标签赋值），Javascript代码务必在标签的后面。
内部的js一般放到body内，原因如下：
- 不阻塞页面的加载(事实上js会被缓存)；
- 可以直接在js里操作dom。（需保证Javascript代码务必在标签的后面）
- “猫头鹰书”建议的方式是放在页面底部，监听window.onload 或 readystate 来触发js
执行顺序
script在构建完DOM之前运行
其他网址
《现代JavaScript教程》=> 加载文档和其他资源=> 页面生命周期：DOMContentLoaded，load，beforeunload，unload
说明
浏览器处理 HTML 文件时，若遇到 <script> 标签，会在继续构建DOM 之前运行它。这是一种防范措施，因为脚本可能想要修改 DOM，甚至对其执行document.write 操作。
如果script是外部的，例如：<script src="my.js"></script>，则会在解析结束之后再加载，就像外部图片一样：<img src='my.jpg' />。
实例1
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<script src="./lib/jquery.js"></script>
<p>here</p>
<script>
alert("front")
$(document).ready(function()
{
alert("ready");
});
alert("behind");
</script>
</body>
</html>
执行结果
front(alert)=> behind(alert)=> here=> ready(alert)
微任务与宏任务
其他网址
《现代JavaScript教程》=> 杂项=> 事件循环：微任务和宏任务=> 宏任务和微任务
简介
每个宏任务之后，引擎会立即执行微任务队列中的所有任务，然后再执行其他宏任务，或渲染，或其他操作。
微任务仅来自于我们的代码。它们通常是由 promise 创建的：对.then/catch/finally 处理程序的执行会成为微任务。微任务也被用于 await的“幕后”，因为它是 promise 处理的另一种形式。宏任务和微任务还有一个特殊的函数 queueMicrotask(func) ，它对 func 进行排队，以在微任务队列中执行。
实例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<script>
setTimeout(() => alert("timeout"));
Promise.resolve()
.then(() => alert("promise"));
alert("code");
</script>
</body>
</html>
执行结果
code(alert)=> promise(alert)=> timeout(alert)
