极客观点
项目管理
HarmonyOS
我知道这个问题被问过很多次，但我还没有找到答案。那么为什么它建议在 body 标记的末尾包含脚本以更好地呈现？
来自 Udacity 课程 https://www.udacity.com/course/ud884 - 在 DOM 和 CSSOM 准备好后开始渲染。 JS 是 HTML 解析阻塞，任何脚本都在 CSSOM 准备好后启动。
所以如果我们得到：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CRP</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- content -->
<script src="script.js"></script>
</body>
</html>
CRP 将是：
CSSOM ready > JS execute > DOM ready > Rendering
如果脚本在前面：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CRP</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- content -->
</body>
</html>
CRP 是一样的：
CSSOM ready > JS execute > DOM ready > Rendering
这个问题只是关于“同步”脚本（没有异步/延迟属性）。
原文由 Artem Svirskyi 发布，翻译遵循 CC BY-SA 4.0 许可协议
从历史上看，脚本会阻止其他资源更快地被下载。通过将它们放在底部，您的样式、内容和媒体可以更快地下载，从而给人以改进性能的 _感觉_。
进一步阅读：
async和defer属性。