<script> 标签应该放在 HTML 的什么位置？<link> 呢？

`<script>` 应该放在 HTML 文件的什么位置？

<script> 可以放在 HTML 文件中的任意位置，不论是<head> 或<body> 甚至是<div> 中，具体位置取决于要引入 JavaScript 档案的功能以及加载顺序的需要。

但要注意的是，HTML 解析的顺序是由上而下依序载入，也就是说，放置的位置会影响到加载的顺序。此外，浏览器在解析 HTML 时，如果遇到 <script>，会先下载、解析完这些 JavaScript 档案，再往下继续解析 HTML 其他内容。当 JavaScript 档案特别大、或是档案是从外部资源载入的，更有可能会受到网路传输或外部服务器的影响，如果加载过程太长，会阻塞 HTML 页面的解析，将会导致页面长时间停滞，影响使用者体验。

基于上述的原因，大部分会建议 <script> 放置在 </body> 底部前，如下方例子：

<!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 src="https://explainthis.com/script"></script>
  </body>
</html>

我们可以进一步看将 <script> 放在 </body> 底部前的好处：

画面更快呈现：浏览器会先解析完整个 HTML，再下载 JavaScript 档案、解析，因此使用者可以在第一时间看到画面，有更好的用户体验
避免 Script 异动到还未载入的 HTML 元素：Script 有可能会异动到 HTML 元素，因此将<script> 置于<body> 的底部，可以确保 HTML 元素已经完全载入，减少异动元素造成错误的风险。

下方代码为例，因为<script> 是放在 head 中，当页面载入时，Script 会立即执行，此时 HTML 元素还未载入 DOM，因此document.getElementById("header")会回传null，导致错误。这就是为什么在某些情况下，放置 Script 于网页的 <head> 中会造成错误的原因。

<html>
  <head>
    <script>
      // 尝试异动特定的 HTML 元素
      var header = document.getElementById("header");
      header.innerHTML = "异动过的文字";
    </script>
  </head>
  <body>
    <h1 id="header">原始的文字</h1>
  </body>
</html>

但其实，<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。因此，样式一开始会是浏览器预设，接着才会变成预期的样式。

<script> 的 async 与 defer 有什么不同？

<script> 应该放在 HTML 文件的什么位置？

<link> 应该放在 html 文件的什么位置？

相关文章

`<script>` 应该放在 HTML 文件的什么位置？

`<link>` 应该放在 html 文件的什么位置？