目录
JS script 标签的位置
- 在我们编写代码的时候，会在页面内使用
<script>标签来写 JS，虽然理论上<script>标签的位置放在哪里可以，但是还是有一点区别的。
1. 为什么大多数人 script 标签放在底部?
- 初学者在学习 JS 的时候看见很多 Demo 里面的
<script>标签写在底部，但是却不是很清楚为什么，下面来解释一下： - 虽然理论上放在哪里都是可以的，但是对于前端页面优化来讲，还是放在底部是最佳的，因为如果 JS 执行出现错误了，最起码页面中的元素还能加载出来，因为 DOM 文档是按从上到下的顺序执行的。
2. DOM 对 script 标签有什么影响？
- DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。
- DOM 文档是自上而下的执行方式，但引入的 CSS 和 JavaScript 的顺序有所不同，CSS 引入执行加载时，程序仍然往下执行，而执行到
<script>标签是则中断线程，待该 script 脚本执行结束之后程序才继续往下执行。
结论：
- 一般将 script 放在 body 代码之后是因为避免长时间执行 script 脚本而延迟阻塞。
- 有一些页面的效果的实现，需要预先动态地加载一些 JS 脚本，这些脚本应该放在 body 相关代码之前。
- 另一方面，不能将需要访问 DOM 元素的 JS 放在 body 相关代码之前，因为此时还没有开始生成 DOM，所以在 body 相关代码之前访问 DOM 元素的 JS 会出错或者无效。
3. script 标签在 body 闭合标签之后可以吗？
- 许多人认为只要放在底部了，无论是
</body>标签之前还是在</body>标签之后都是一样的。其实还是有差别的，因为从 HTML 2.0 起，放在</body>标签之后就是不合标准的。之所以但是浏览器却不会报错，是因为如果在</body>标签之后再出现<script>或任何元素的开始标签， 都是parse error，浏览器会忽略之前的</body>，即视作仍旧在 body 内。所以实际效果和写在</body>标签之前是没有区别的。 - 所以，只要是让浏览器做了多余的事都是不好的，虽然差别细微，但是还是应该按照标准来，即放在
</body>标签之前”。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
...
<script>
...
</script>
</body>
</html>
- 知道了编写 JS 的 script 标签的推荐位置了，那么导入 JS 的 script 标签应该放在 head 中还是 body 中？
4. 导入 JS 的 script 标签放在哪？
- 规范是放在 head 中。不过放在其他位置也可以，主要是先加载和后加载的区别，而且各有各的好处。
- 放在 head 中：可以统一管理，方便维护；但是浏览器会先加载 JS 文件，如果 JS 文件过大，会造成页面在加载 JS 的时候无响应的时间过长，影响用户体验。
- 放在 body 中（或放在 body 后）：浏览器会首先加载 JS 文件之前的元素，并显示到界面上，这样给用户的体验较好，但是不方答便维护。
- 建议：页面初始化需要用到的 JS 或者比较小版的 JS 文件，放在 head 中；比较特殊的用于页面指定位权置的 JS 文件放在 body 中对应位置；较大的、影响用户体验的 JS 文件放在 body 后。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/... .min.js"></script>
</head>
<body>
...
<script>
...
</script>
</body>
</html>
