HTML 中異步加載 JS 檔案
平時習慣：将 script 放到 body 底部
首先，我們有一個意識：對于 HTML 檔案而言，要将引入 JavaScript 代碼的 script 放到底部。
例如：
首先我們要建立一個名為
index.js
的腳本檔案，其内容為：
随後在同目錄下建立一個名為
index.html
的檔案，其内容為：
在浏覽器中打開
index.html
, 當我們點選 button 按鈕時候，效果是：
處于body底部的script标簽效果
但如果我們将其放到 body 頂部或者 head 标簽底部，即将
index.html
中的代碼改寫為：
此時，再點選 button 按鈕，效果是：
其效果是：
處于head底部的script标簽
此時，浏覽器開發者工具中也會報錯：
script标簽放到head底部時報錯
原因
上述問題出現的原因在于：浏覽器是同步解析 HTML 檔案的，即對于一個 HTML, 浏覽器從上向下依次執行。
在 html 檔案中：
- 當 script 标簽處于 header 底部時，浏覽器優先加載 script 标簽的内容，而由于現在還沒有解析到 body 中，導緻此時 button 标簽并不存在，是以 btn 的值為 null, onclick 并沒有綁定上。
- 當 script 标簽處于 body 底部時，會首先解析之前的标簽，最後再執行 script 的内容。
是以，平時将 script 寫在 body 的書寫方式也就可以了解了：禁止 script 标簽阻塞浏覽器解析 HTML 内容，以防止出現意想不到的問題，同時還可以優化白屏時間，提高使用者體驗。
如何異步加載 script 标簽
在實際工作中，為性能考慮，同步加載也許并不能滿足我們的要求，是以我們需要考慮：如何實作異步加載 script 标簽。
defer 與 async
script 标簽提供了兩個屬性，用來異步加載外部腳本檔案，關于二者的原理與異同可見文章[WIP] 搞懂 script 标簽中 defer 和 async
我們可以将原 HTML 檔案改寫為：
或：
此時，即使 script 标簽處于實際展示的内容之上，也可以将
onclick
事件綁定到 button 标簽上。
動态加載 script 标簽
首先，看下面代碼：
上述代碼中，我們建立了一個函數，來動态建立所需的 script 标簽。
該方法在建立好 body 元素後開始執行，是以
document.body
不為空，是以，其效果與在 body 底部引入 script 标簽效果等同。