一般習慣把js寫在`</body>`前，但有例外的情況嗎？說說看

王铁柱6發表於2024-12-09
JS

是的，一般習慣把 JavaScript 程式碼放在 </body> 結束標籤之前，這是為了確保在執行 JavaScript 程式碼之前，HTML 文件的結構已經完全載入完畢。這樣可以避免 JavaScript 程式碼操作尚未載入的 DOM 元素，從而導致錯誤。

然而，確實存在一些例外情況，在這些情況下，將 JavaScript 程式碼放在 <head> 標籤內或 </body> 標籤之後，甚至是放在 <body> 標籤內的特定位置，可能更為合適。以下是一些例外情況：

  • 需要儘早執行的指令碼: 某些 JavaScript 程式碼需要在頁面載入的早期階段執行，例如：

    • 用於分析和統計的指令碼: 這些指令碼需要儘早載入，以便捕獲所有使用者互動資料。例如，Google Analytics 的跟蹤程式碼通常放在 <head> 標籤中。
    • 影響頁面渲染的指令碼: 如果 JavaScript 程式碼會影響頁面的樣式或佈局，最好將其放在 <head> 標籤中，以避免頁面閃爍或重新渲染。例如，設定 document.documentElement.className 來應用不同的樣式表。
    • 關鍵的 polyfill: 如果你的網站需要支援一些較舊的瀏覽器，可能需要使用 polyfill 來提供缺失的功能。這些 polyfill 需要在其他指令碼執行之前載入，以確保所有功能正常工作。

  • 使用 async 或 defer 屬性: HTML5 引入了 async 和 defer 屬性，可以控制指令碼的載入和執行方式。

    • async: 使用 async 屬性的指令碼會在下載完成後立即執行，不會阻塞 HTML 解析器。這適用於獨立的指令碼，例如廣告或分析指令碼。
    • defer: 使用 defer 屬性的指令碼會在 HTML 解析完成後，但在 DOMContentLoaded 事件觸發之前執行。這適用於依賴 DOM 結構的指令碼，但又不希望阻塞頁面渲染。 使用 defer 屬性的指令碼可以放在 <head> 中，並且會在文件解析完成後，</body> 之前執行。

  • 內聯 JavaScript 程式碼: 少量簡單的 JavaScript 程式碼可以直接嵌入到 HTML 標籤中，例如事件處理程式。例如：<button onclick="alert('Hello!')">Click me</button>。 雖然方便，但通常建議避免過多的內聯 JavaScript 程式碼，因為它會使程式碼難以維護。

  • 現代框架和構建工具: 現代前端框架（如 React、Vue、Angular）和構建工具（如 Webpack）通常會自動處理 JavaScript 程式碼的載入和執行順序。開發者通常不需要手動管理指令碼的位置。

總而言之，雖然將 JavaScript 程式碼放在 </body> 結束標籤之前是普遍的做法，但在某些特定情況下，根據指令碼的功能和需求，選擇其他位置可能更為合適。 使用 async 和 defer 屬性可以更好地控制指令碼的載入和執行，從而提高頁面效能。 理解這些例外情況和最佳實踐，可以幫助開發者編寫更高效和更易維護的前端程式碼。

相關文章