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)