HTML Head 標籤載入順序疑問：為何 CSS 不報錯而 JS 會？

在學習 HTML 解析機制時，常見的一個疑問是：瀏覽器是從頭到尾讀取 HTML 文件，若在 <head> 中引入的 JavaScript 腳本試圖操作尚未讀取到的 <body> 元素，便會拋出錯誤。但為何 CSS 樣式表先載入、作用於尚未解析的 body 元素時，卻不會報錯？

核心差異：解析與執行機制

這涉及瀏覽器渲染引擎的核心流程：

• CSS 是聲明式的：瀏覽器解析 CSS 時，只是建立樣式規則樹（CSSOM），並不會立即執行「查找元素並應用樣式」的邏輯。即便目標元素尚未存在於 DOM 樹中，規則依然被儲存。後續 DOM 樹構建完成，瀏覽器將 CSSOM 與 DOM 樹合併生成渲染樹，樣式自然生效。允許為不存在的元素（或偽類）預定義樣式，這是 CSS 設計使然。
• JavaScript 是命令式的：腳本在解析到 <script> 標籤時（無 defer/async 屬性），會立即暫停 HTML 解析，執行 JS 代碼。若代碼中包含 document.getElementById('foo') 等操作，而對應元素尚未被解析進 DOM，則會返回 null，導致後續調用屬性/方法拋出錯誤。

最佳實踐建議

1. 將 <script> 標籤放在 </body> 之前，確保 DOM 就緒。
2. 或在 <head> 中使用 <script defer> 屬性，延遲執行至 HTML 解析完成後。
3. CSS 正常放在 <head> 中，利用瀏覽器並行下載優化首屏渲染。

理解這一機制差異，有助於避免常見的「找不到元素」錯誤，並編寫更健壯的前端代碼。