第二章 運行時的頁面構建過程

 

一、客戶端 Web 應用的生命週期

客戶端 Web 應用的生命週期從用戶指定某個網站地址（或單擊某個連接）開始

其由兩個步驟組成：頁面構建和事件處理

　　頁面構建 —— 建立用戶界面

　　事件處理 —— 進入循環（序號5）從而等待事件（序號6）的發生，發生後調用事件處理器

 

 

二、頁面構建階段

頁面構建階段從瀏覽器接收頁面代碼開始

其執行分爲兩個步驟：

　　(1)、解析 HTML 代碼並構建文檔對象模型（DOM）

　　(2)、執行 Javascript 代碼

步驟 1 會在瀏覽器處理 HTML 節點的過程當中執行

步驟 2 會在 HTML 解析到一種特殊節點 —— 腳本節點時執行

頁面構建階段中這兩個步驟會交替執行屢次

 

 

 

三、在頁面構建階段執行 JavaScript 代碼

當瀏覽器在頁面構建階段遇到了腳本節點，它會中止 HTML 到 DOM 的構建，轉而開始執行 JavaScript 代碼

這個例子中，JavaScript 經過建立一個新元素並將其插入 DOM 節點修改了當前的 DOM 結構

通常來講，JavaScript 代碼可以在任何程度上修改 DOM 結構：它能建立新的節點或移除現有 DOM 節點

但它依然不能作某些事情，例如選擇和修改尚未被建立的節點

這就是爲何要把 script 元素放在頁面底部的緣由。如此一來，咱們就沒必要擔憂是否某個 HTML 元素已經加載爲 DOM

 

關於下劃線：

　　瀏覽器接收的 HTML 代碼用做建立 DOM 的藍圖，咱們使用 Javascript 代碼來動態地修改 DOM 以便給 Web 應用帶來動態行爲。

 

四、事件處理

客戶端 Web 應用是一種 GUI 應用，也就是說這種應用會對不一樣類型的事件做響應，如鼠標移動，單擊和鍵盤按壓等。

所以，在頁面構建階段執行的 JavaScript 代碼，除了會影響全局應用狀態和修改 DOM 外，還會註冊事件監聽器（或處理器）。這類監聽器會在事件發生時，由瀏覽器調用執行。

有了這些事件處理器，咱們的應用也就有了交互能力。

 

五、處理事件

在事件處理階段中，事件循環會檢查隊列，其發現隊列的前面有一個鼠標移動事件，而後執行了相應的事件處理器序號2。

當鼠標移動事件處理器處理完畢後，輪到了等待在隊列中的單擊事件。

當鼠標移動事件處理器函數的最後一行代碼執行完畢後，JavaScript引擎退出事件處理器函數，鼠標移動事件完整地處理了序號3，事件循環再次檢查隊列

這一次，在隊列的最前面，事件循環發現了鼠標單擊事件並處理了該事件，一旦單擊處理器執行完成，隊列中再也不有新的事件，事件循環就會繼續循環，等待處理新到來的事件。這個循環會一直執行到用戶關閉了 Web 應用。

 

 

 

重點注意瀏覽器在這個過程當中的機制，其放置事件的隊列是在頁面構建階段和事件處理階段之外的。這個過程對於決定事件什麼時候發生並將其推入事件隊列很重要，這個過程不會參與事件處理線程。

 

 

圖片來自：JavaScript忍者祕籍（第2版）