<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 文件的什麼位置？