“內部”示例使用了以下結構：
document.addEventListener("DOMContentLoaded", function() {
. . .
});
這是一個事件監聽器，它監聽瀏覽器的 "DOMContentLoaded" 事件，即 HTML 文檔體加載、解釋完畢事件。事件觸發時將調用 " . . ." 處的代碼，從而避免了錯誤發生。
“外部”示例中使用了 JavaScript 的一項現代技術（async “異步”屬性）來解決這一問題，它告知瀏覽器在遇到 <script> 元素時不要中斷後續 HTML 內容的加載。
<script src="script.js" async></script>
解決此問題的舊方法是：把腳本元素放在文檔體的底端（</body> 標籤之前，與之相鄰），這樣腳本就可以在 HTML 解析完畢後加載了。此方案（以及上述的 DOMContentLoaded 方案）的問題是：只有在所有 HTML DOM 加載完成後纔開始腳本的加載/解析過程。對於有大量 JavaScript 代碼的大型網站，可能會帶來顯著的性能損耗。這也是 async 屬性誕生的初衷。
瀏覽器遇到 async 腳本時不會阻塞頁面渲染，而是直接下載然後運行。這樣腳本的運行次序就無法控制，只是腳本不會阻止剩餘頁面的顯示。當頁面的腳本之間彼此獨立，且不依賴於本頁面的其它任何腳本時，async 是最理想的選擇。
使用 defer 屬性，腳本將按照在頁面中出現的順序加載和運行
詳情請瀏覽官方最新文檔：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript