2-運行時的頁面構建過程

前言

• 本系列是本身javascript忍者祕籍第2版讀書筆記
• 初次寫文章,記錄下本身的足跡。還但願各位大佬多多包容。
• 這個讀書筆記是本身github上,夯實前端基礎項目的一個分支。
• 連接：Front-end-Advancement

本章包括如下內容:

• Web應用的生命週期步驟
• 從HTML代碼到Web頁面的處理過程
• javaScript代碼的執行順序
• 與事件交互
• 事件循環

生命週期概覽

頁面構建階段

• 當Web應用能被展現或交互以前,其頁面必須根據服務器獲取的響應(一般是HTML,CSS和 javascript代碼)來構建。頁面構建的目標是創建Web應用的UI

1. 解析html代碼並構建文檔對象模型(dom)
2. 執行javascript代碼

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

HTML解析和DOM構建

• 儘管dom是根據HTML來建立的,二者緊密聯繫,可是須要強調的是,它們二者並不相同。你能夠把HTML代碼看做瀏覽器頁面UI構建初始化DOM的藍圖。爲了正確構建每一個DOM,瀏覽器還會修復它在藍圖中發現的問題。

執行javascript代碼

• 每當解析到腳本元素時,瀏覽器就會中止從html構建dom,並開始執行JavaScript代碼。

• javascript代碼由瀏覽器的javascript引擎執行。

• 因爲代碼的主要目的是提供動態頁面,故而瀏覽器經過全局對象提供了一個API 使javascript引擎能夠與之交互並改變頁面內容。

1. JavaScript中的全局對象 window

• window.document 表明了當前頁面的dom。經過使用這個對象,JavaScript代碼就能在任何程度上改變DOM,包括修改或移除現存的節點,以及建立和插入新的節點。

2. JavaScript代碼的不一樣類型

• 全局代碼 全局代碼指的是位於函數以外
• 函數代碼 函數代碼指的是包含在函數中的代碼

3. 在頁面構建階段執行JavaScript代碼

• 一旦JavaScript引擎執行到了腳本元素中javascript代碼的最後一行,瀏覽器就退出了javascript執行模式,並繼續餘下的html構建爲dom節點。在這期間,若是瀏覽器再次遇到腳本元素,那麼從html到dom的構建再次暫停,JavaScript運行環境開始餘下的javascript代碼。須要重點注意：javascript應用在此時依然會保持着全局狀態。全部在某個javascript代碼執行期間用戶建立的全局變量都能正常的被其餘腳本元素中JavaScript代碼所訪問到。其緣由在於全局window對象會存在於整個頁面的生存期之間,在它上面存儲着的全部的javascript變量。只要尚未處理完的html元素和沒執行完的javascript代碼,下面兩個步驟都會一直交替執行。

1. 將Hmtl構建爲dom
2. 執行JavaScript代碼

• 變量都保存在window上 (同名函數會覆蓋同名變量)

  

事件處理

事件處理器概覽

• 瀏覽器執行環境的核心思想基於:同一時刻只能執行一個代碼片斷,即所謂的單線程執行模型。
• 瀏覽器須要一種方式來跟蹤已經發生但還沒有處理的事件。爲了實現這個目標,瀏覽器使用了事件隊列。

1. 事件是異步的

• 瀏覽器事件，例如當頁面加載完成後或沒法加載時；
• 網絡事件，例如來自服務器的響應（Ajax事件和服務器端事件）；
• 用戶事件，例如鼠標單擊、鼠標移動和鍵盤事件；
• 計時器事件，當timeout時間到期或又觸發了一次時間間隔。
• Web應用的JavaScript代碼中，大部份內容都是對上述事件的處理！
• 事件處理的概念是Web應用的核心。代碼的提早創建時爲了在以後的某個時間點執行。除了全局代碼,頁面中的大部分代碼都將做爲某個事件的結果執行。

註冊事件處理器

• 在客戶端Web應用中,有兩種方式註冊事件。

1. 經過把函數賦值給某個特殊屬性
2. 經過使用內置 addEventListener方法

// onload事件上 當 dom已經就緒並所有構建完成,就會觸發這個事件
// 缺點 對於某個事件只能註冊一個事件處理器
window.onload = function () {}


document.body.addEventListener('mousemove',function(){})

document.body.addEventListener('click',function(){})

複製代碼

處理事件

• 事件處理背後的主要思想是:當事件發生時,瀏覽器調用相應的事件處理器。
• 因爲單線程執行模型,因此同一時刻只能處理一個事件。
• 任何後面的事件都只能在當前事件處理器徹底執行後才能被處理。

小結

1. 瀏覽器接收的HTML代碼用做建立DOM的藍圖,它是客戶端Web應用結構的內部展現階段
2. 咱們使用JavaScript代碼來動態地修改DOM以便給Web應用帶來動態行爲
3. 客戶端Web應用的執行分爲兩個階段

• 頁面構建代碼是用於建立DOM的,而全局javascript代碼是遇到script節點時執行的。在這個執行過程當中javascript代碼是可以以任意程度改變當前的dom,還可以註冊事件處理器————事件處理器是一種函數,當某個特定事件發生後會被執行。註冊事件處理器很容易:使用內置的 addEventListener方法。
• 事件處理————在同一時刻,只能處理多個不一樣事件中的一個,處理順序是事件生產的順序。事件處理階段大量依賴事件隊列,全部的事件都以其出現的順序存儲在事件隊列中。事件循環會檢查事件隊列的對頭,若是檢測到了一個事件,那麼相應的事件處理器就會被調用。