2.1.1 标签的位置
传统做法，所有<script>元素都应该放在页面的<head>元素中，例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
这样做的目的：把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。
问题：在文档<head>元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成后，才能开始呈现页面的内容（浏览器在遇到<body>标签才开始呈现内容）。对于需要很多 JavaScript 代码的页面来说，这会导致：浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口：将是一片空白。
为了避免这个问题，现代Web应用程序一般都把全部 JavaScript 引用放在<body>元素中页面内容的后面，如下：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
这样，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
（原）JavaScript高级程序设计(第3版)--学习笔记--02: 在HTML中使用JavaScritp--0002
原文：https://www.cnblogs.com/wodehao0808/p/9086317.html