※ Javascript和HTML的關係
當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：
- 解析 HTML / CSS 檔案，建立物件模型：
- HTML → DOM (Document Object Model)。
- CSS → CSSOM (CSS Object Model)。
- 將 DOM 和 CSSOM 合併為 Render Tree，準備開始運算。
- 計算每個元素的畫面位置，產生 Layout。
- 繪製畫面細節 (Paint)。
※ Javascript和DOM API的關係
DOM 和 CSSOM 就是瀏覽器開放給 JavaScript 的 API，目的是為了要讓 JavaScript 去操作網頁元素。
重點整理：
- HTML 被瀏覽器解析之後，變成一叫做 DOM 的結構。
- JavaScript 可以修改 DOM 結構中任意節點。
- 我們實際在視窗裡看到的結果，是 JavaScript 操作以後的結果。
※ 順序很重要：先載入 HTML，再載入 JavaScript
說明：
- JavaScript 檔案執行中可能會阻塞網頁的渲染。將
<script>放在底部，可以讓網頁的主要內容先渲染出來，加快渲染速度。 - 為了避免操作未就緒的 DOM 元素造成錯誤，因此放在底部可以保證腳本運行時 DOM 已完全建立。
- 最後再去讀取 JavaScript 來修改 DOM。
