第二章 運行時的頁面構建過程
1、客戶端 Web 應用的生命周期
客戶端 Web 應用的生命周期從用戶指定某個網站地址（或單擊某個鏈接）開始
其由兩個步驟組成：頁面構建和事件處理
頁面構建 —— 創建用戶界面
事件處理 —— 進入循環（序號5）從而等待事件（序號6）的發生，發生後調用事件處理器
2、頁面構建階段
頁面構建階段從瀏覽器接收頁面代碼開始
其執行分為兩個步驟：
(1)、解析 HTML 代碼並構建文檔對象模型（DOM）
(2)、執行 Javascript 代碼
步驟 1 會在瀏覽器處理 HTML 節點的過程中執行
步驟 2 會在 HTML 解析到一種特殊節點 —— 腳本節點時執行
頁面構建階段中這兩個步驟會交替執行多次
3、在頁面構建階段執行 JavaScript 代碼
當瀏覽器在頁面構建階段遇到了腳本節點，它會停止 HTML 到 DOM 的構建，轉而開始執行 JavaScript 代碼
這個例子中，JavaScript 通過創建一個新元素並將其插入 DOM 節點修改了當前的 DOM 結構
一般來說，JavaScript 代碼能夠在任何程度上修改 DOM 結構：它能創建新的節點或移除現有 DOM 節點
但它依然不能做某些事情，例如選擇和修改還沒有被創建的節點
這就是為什麽要把 script 元素放在頁面底部的原因。如此一來，我們就不必擔心是否某個 HTML 元素已經加載為 DOM
關於下劃線
瀏覽器接收的 HTML 代碼用作創建 DOM 的藍圖，我們使用 Javascript 代碼來動態地修改 DOM 以便給 Web 應用帶來動態行為。
4、事件處理
客戶端 Web 應用是一種 GUI 應用，也就是說這種應用會對不同類型的事件作響應，如鼠標移動，單擊和鍵盤按壓等。
因此，在頁面構建階段執行的 JavaScript 代碼，除了會影響全局應用狀態和修改 DOM 外，還會註冊事件監聽器（或處理器）。這類監聽器會在事件發生時，由瀏覽器調用執行。
有了這些事件處理器，我們的應用也就有了交互能力。
5、處理事件
在事件處理階段中，事件循環會檢查隊列，其發現隊列的前面有一個鼠標移動事件，然後執行了相應的事件處理器序號2。
當鼠標移動事件處理器處理完畢後，輪到了等待在隊列中的單擊事件。
當鼠標移動事件處理器函數的最後一行代碼執行完畢後，JavaScript引擎退出事件處理器函數，鼠標移動事件完整地處理了序號3，事件循環再次檢查隊列
這一次，在隊列的最前面，事件循環發現了鼠標單擊事件並處理了該事件，一旦單擊處理器執行完成，隊列中不再有新的事件，事件循環就會繼續循環，等待處理新到來的事件。這個循環會一直執行到用戶關閉了 Web 應用。
圖片來自：JavaScript忍者秘籍（第2版）
第二章 運行時的頁面構建過程