<script> 标签应该放在 HTML 的什么位置？<link> 呢？
2024年7月10日
<script> 应该放在 HTML 文件的什么位置？
<script> 可以放在 HTML 文件中的任意位置，不论是 <head> 或 <body> 甚至是 <div> 中，具体位置取决于要引入 JavaScript 档案的功能以及加载顺序的需要。
但要注意的是，HTML 解析的顺序是由上而下依序载入。也就是说，放置的位置会影响到加载的顺序。
此外，浏览器解析 HTML 时，会由上而下依序载入内容。当遇到 <script> 标签时，浏览器会暂停 HTML 解析，先下载并执行 JavaScript 档案，然后再继续解析剩余的 HTML 内容。
当 JavaScript 档案特别大、或是档案是从外部资源载入的，有可能会受到网路传输或外部伺服器的影响，如果加载过程太长，会阻塞 HTML 页面的解析，将会导致页面长时间停滞，影响使用者体验。
基于上述的原因，大部分会建议 <script> 放置在 </body> 底部前，这样做有以下好处：
- 画面更快呈现：浏览器会先解析完整个 HTML，再下载 JavaScript 档案、解析，因此使用者可以在第一时间看到画面，有更好的用户体验
- 避免 Script 异动到还未载入的 HTML 元素：Script 有可能会异动到 HTML 元素，因此将
<script>置于<body>的底部，可以确保 HTML 元素已经完全载入，减少异动元素造成错误的风险。
程式码范例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
</head>
<body>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<!-- <script> 置于 <body> 的底部 -->
<script src="https://explainthis.com/script"></script>
</body>
</html>
<script> 放置在 <head> 中的问题
下方程式码为例，
<html>
<head>
<script>
// 尝试异动特定的 HTML 元素
var header = document.getElementById("header");
header.innerHTML = "异动过的文字";
</script>
</head>
<body>
<h1 id="header">原始的文字</h1>
</body>
</html>
因为 <script> 是放在 <head> 中，当页面载入时，Script 会立即执行，此时 HTML 元素还未载入 DOM，因此
document.getElementById("header")
会回传 null，导致错误。
这就是为什么在某些情况下，放置 Script 于网页的 <head> 中会造成错误的原因。
<script> 放置在 <body> 尾部的问题
但其实，<script> 放在尾部的也是有一些缺点，例如：网页一开始会没有功能性。因为 <script> 最后加载，所以功能还没有被载入，这种情况可能会导致使用者虽然看到画面，但却没有功能性的情况发生。
所以将 <script> 放在尾部也不是最优解，更好的方式，会是透过 defer 或 async 一边解析页面，一边下载 JavaScript。我们在 《<script> 的 async 与 defer 有什么不同？》 中有完整的说明。
<link> 应该放在 html 文件的什么位置？
<link> 标签通常应放置在 HTML 文件的 <head> 区域内。这个标签主要用于连接外部资源，如 CSS 样式表、字型档案和网站图示。
以下是一个简单的范例：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
<link> 放置在 <head> 内，可以确保浏览器在渲染网页内容之前已经载入所需的外部资源，所以当使用者开始看到画面时，样式不会有奇怪的变动。
如果把 <link> 放在页面的底部，那么当浏览器载入时，它会先载入页面的内容，然后再载入 CSS。因此，样式一开始会是浏览器预设，接着才会变成预期的样式。