JavaScript 寫在哪裡?
JavaScript 可以寫在那些地方呢? 其實，可以寫在任何地方。當然，造成後續的狀況也會不一樣。基本上，依狀況不同，我們可寫在三個地方，如下:
- 單一文件。
- 標籤內。
- 外部引入。
小提醒
瀏覽器遇到 <script> 標籤時，會停止渲染 HTML 文件，先執行 <script> 裡面的 JavaScript 程式碼，等到執行完畢後，才會繼續渲染接下來的 HTML 文件。
因此，早期年代常會將 <script> 標籤擺放在 </body> 前面，以確保所有 DOM 元素都已建立完成，再進行 JavaScript 的下載、執行。
單一文件
在 <head> 或 <body> 中產生 <script> 標籤區域並寫在該標籤當中。
html
<script>寫在這裡</script>標籤內
在標籤的屬性中。
html
<body onload="寫在這裡"> ... </body>外部引入
在 <head> 或 <body> 中引入。
html
<script src="檔案名稱.js"></script>使用 defer、async 加速網頁載入
使用 defer、async 屬性可以加速網頁載入時間。當瀏覽器在解析 HTML 時，順序是由上而下、有左而右。因此，使用這兩個屬性，於下載時並不會阻擋 HTML 的 DOM 渲染。
html
<script defer src="檔案名稱.js"></script>
<script async src="檔案名稱.js"></script>但這兩個屬性又有什麼差別呢?
defer
- 整個網頁的都渲染完畢，也就是 DOM 都建立完成之後才會開始執行 JavaScript。
- 會依照 HTML 的順序執行，如果已下載完畢也會等前面的 JavaScript 執行完畢才開始執行自己的 JavaScript。
async
- 不會等 DOM 建立完成，直接執行 JavaScript。
- 不會依照 HTML 的執行順序，只要下載完畢就執行。
效能優化
- 傳統方式： 畫面渲染 → 停止渲染 → 請求 Js → 等待 → 執行 Js → 執行 Js 完成 → 繼續畫面渲染。
- defer： 畫面渲染 → 請求 Js 並等待（畫面渲染進行中）→ 畫面渲染完成 → 執行 Js。
- async： 畫面渲染 → 請求 Js 並等待（畫面渲染進行中）→ 執行 Js（停止渲染） → 執行 Js 完成 → 繼續畫面渲染。