webkit 瀏覽器內幕之HTML 直譯器和DOM 模型

lvrice_start發表於2018-08-29

DOM 標準

DOM 全稱為文件物件模型,它可以是一種獨立於平臺和語言的方式訪問和修改一個文件的內容和結構 。 DOM 結構構成基本的要素是‘節點’,而文件的DOM 結構就是由層次化的節點組成。在DOM 模型中,節點的概念很寬寬泛,整個文件就是一個節點,稱為文件節點,HTML 中 tag 也是一種節點,稱為元素節點。

HTML 直譯器

HTML 直譯器 的工作就是將網路或者本地磁碟獲取的HTML 網頁和資源從位元組流解釋成 DOM 結構

  • 詞法分析,在進行詞法分析之前,直譯器最先做的是檢查該網頁內容使用的編碼格式,以便後面使用合適的解碼器。如果直譯器在HTML 網頁中找到了設定編碼格式。 webkit 會使用相應的解碼器將位元組流轉換成特定格式 的字串。
  • XSSAuditor 驗證詞語 當詞語生成之後,webkit 需要 XSSAuditor 來驗證詞語流。主要是針對安全方面的考慮。 經過詞法分析解釋之後,將被webkit 用來構建 DOM 結點。

DOM 事件機制

事件在工作過程中使用兩個主體,第一個是事件,第二個是事件目標。事件處理最重要的部分是事件捕獲和事件冒泡這兩種機制。

  • webkit 事件處理機制 基於 webkit 的瀏覽器事件處理過程,首先是做的hitTest,查詢事件發生處的元素,檢測該元素有無監聽者,如果網頁的相關節點註冊了事件的監聽者,那麼瀏覽器會把事件派發給webit 核心來處理。同時瀏覽器也可能需要理解和處理這樣的事件。這主要是因為,有些事件瀏覽器必須響應從而對網頁作預設處理。

相關文章