<script> 標籤應該放在 HTML 的什麼位置?<link> 呢?

2023年2月10日

💎 加入 E+ 成長計畫 與超過 400+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

<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> 底部前的好處:

  1. 畫面更快呈現:瀏覽器會先解析完整個 HTML,再下載 JavaScript 檔案、解析,因此使用者可以在第一時間看到畫面,有更好的用戶體驗
  2. 避免 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。因此,樣式一開始會是瀏覽器預設,接著才會變成預期的樣式。


相關文章

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們