HTML基礎
<script> 應該放在 HTML 的什麼位置？<link> 呢？
<script> 的放置位置
放在 <body> 底部（傳統做法）
<body>
<!-- 頁面內容 -->
<script src="app.js"></script>
</body>
將 <script> 放在 </body> 前，是因為瀏覽器解析 HTML 時若遇到 <script>，會暫停 HTML 解析，先下載並執行 JS，容易造成頁面白屏。放在底部可確保 DOM 先渲染完畢。
現代做法：使用 defer 或 async
<head>
<script src="app.js" defer></script>
</head>
使用 defer 或 async 屬性，可以將 <script> 放回 <head>，同時避免阻塞 HTML 解析（詳見 async vs defer 題目）。
<link> 的放置位置
<head>
<link rel="stylesheet" href="style.css">
</head>
<link>（CSS 樣式表）應放在 <head> 中，原因：
- 避免 FOUC（Flash of Unstyled Content）：若 CSS 晚於 HTML 載入，頁面會先短暫出現無樣式的內容
- 瀏覽器渲染流程：瀏覽器需要 CSSOM 才能進行渲染，提早載入 CSS 可加快首次渲染
總結
| 標籤 | 建議位置 | 原因 |
|---|---|---|
<link> |
<head> |
避免 FOUC，加快渲染 |
<script> |
<body> 底部 或 <head> + defer |
避免阻塞 HTML 解析 |
✦ AI 模擬面試
輸入你的答案，AI 即時分析精準度與改進空間
登入後即可使用 AI 評分