---
# System prepended metadata

title: HTML 的資源載入順序

---


HTML 解析的順序是**由上而下依序載入**，放置的位置會影響到加載的順序，且前一個沒載完不會進行下一個元素的載入。


## `<script>`
### 放置位置：`<body/>` 底部

`<script/>` 可以放在 HTML 文件中的任意位置，不論是 `<head>` 或 `<body>` 甚至是 `<div>` 中，具體位置取決於要引入 JavaScript 檔案的功能以及加載順序的需要。

### ⭕️ 優點：
**畫面更快呈現**：瀏覽器會先解析完整個 HTML，再下載 JavaScript 檔案、解析，因此使用者可以在第一時間看到畫面，有更好的用戶體驗
**避免 Script 異動到還未載入的 HTML 元素**：Script 有可能會異動到 HTML 元素，因此將 `<script/>` 置於 `<body>` 的底部，可以確保 HTML 元素已經完全載入，減少異動元素造成錯誤的風險。

### ❌ 缺點:
**網頁一開始可能會沒有功能性**：因為 <script/> 最後加載，所以功能還沒有被載入，這種情況可能會導致使用者雖然看到畫面，但卻沒有功能性的情況發生。
    
### 為什麼不建議把 **`<script>`** 放在 **`<head>`** 裡
HTML 文件從上到下解析。遇到 `<head>` 裡的 **`<script/>`**，瀏覽器會先下載並解析這些 JavaScript，再繼續解析 HTML。
    如果 script 放在 `<head>` 裡且檔案大或從外部下載，可能會花更長時間，導致頁面渲染停滯（因為網頁 html 放在 head 之後，都還沒讀取到，使用者只會看到一片空白，直到 head 裡的script 都載入完成，才會開始著手 html 的 body 內容），影響使用者體驗。

## `css`、字型引入
### 放置位置：`<head>` 內
**css** 放置在 `<head>` 內，可以確保瀏覽器在渲染網頁內容之前已經載入所需的外部資源，所以當使用者開始看到畫面時，樣式已經載完

### 為何不放在 body 的底部跟 script 放一起？
如果把 `<link>` 放在頁面的底部，那麼當瀏覽器載入時，它會先載入頁面的內容，然後再載入 CSS。因此，樣式一開始會是瀏覽器預設，接著才會變成預期的樣式。

## 所以大致上會長這樣
```html!
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>這是一個示範網頁</title>
    
    <!-- 網頁 meta 內容 -->
    
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  
  <body>
    <!-- 網頁內容 -->
    <script src="https://example.com"></script>
  </body>
  
</html>
```



資料來源：
[ExplainThis - <script> 標籤應該放在 HTML 的什麼位置？<link> 呢？](https://www.explainthis.io/zh-hant/swe/script-link-in-html)