為何我們習慣把 script 塞在 body 最後面
date
Oct 3, 2023
slug
why-we-used-to-put-script-at-the-end-of-body
status
Published
tags
JavaScript
summary
type
Post
在剛開始學習 JavaScript 時，時常會看到教學文有把 script tag 放在 body 最下方的寫法
但為什麼需要放在最下面呢？而又為什麼有時候是放在 head tag 內呢？其實這和 script 載入、執行的順序以及 script 是否操作 DOM 有關。
先以最單純的 vanilla js 為例，如果今天需要操作 DOM，我們就必須讓瀏覽器在執行到 script 前就已經 parse 完 DOM，因此很合理地將 script 放入 body 最下方才能確保 DOM 已經順利被解析完成。
但可能有人會問，如果是使用 defer 呢？ 答案是：是可以的，但是不能寫成 inline script。
理由很單純，因為使用
defer attribute 時，script 需要戴上 src attribute。 async 也是如此，這兩種屬性也是為了 async 載入 script 而生。如果不帶上的話，預設是會暫停瀏覽器的解析，等到 script 載入、執行後才會繼續。而這兩個 attribute 使用上的差異是
defer 會等到瀏覽器解析完 DOM 後、DOMContentLoaded 事件觸發前執行 script，且使用 defer 的 script 們是會由上到下執行的。因此只要寫成
這樣也是可以的。
結語
雖然這篇的觀念很基本，但現代的前端框架因為整合了很多 bundle/build tool 其實都把這塊藏起來了，但如果要串接第三方、埋 tracking 這些知識是很需要了解的，才不會因為載入順序錯誤發生問題或是影響到效能。
最後附上一張 HTML spec 裡的載入、執行比較表
