WebKit技術內幕（筆記）

一：瀏覽器

1.渲染引擎:
    html解釋器：主要做用是將HTML文本解釋成DOM樹
    css解釋器 ：爲DOM中的各個元素對象計算出樣式信息，從而爲計算後網頁的佈局提供基礎設施
    佈局：在DOM建立以後，Webkit須要將其中的元素對象一樣式信息結合起來，計算他們的大小位置等佈局信息，造成一個可以表示這全部信息的內部表示模型
    Javascript引擎：解釋JS代碼並經過DOM結構和CSSOM接口來修改網頁內容和樣式信息，從而改變渲染的結果
    繪圖：使用圖形庫將佈局計算後的各個網頁節點繪製成圖像結果



二.html網頁和結構
     
（1）.webkit渲染過程

    一：從網頁URL到構建完DOM樹過程
     1）當用戶輸入URL的時候，webkit調用其資源加載器加載該URL對應的網頁
     2）加載器依賴網絡模塊創建鏈接，發送請求並接收答覆
     3）webkit接收到各類網頁或者資源的數據，其中某些資源多是同步或一步獲取的
     4）網頁被交給HTML解釋器轉變成一系列的詞語（Token）
     5）解釋器根據詞語構建節點（Node），造成DOM樹
     6）若是接電視js代碼的話，調用js引擎解釋並執行
     7）js代碼可能會修改DOM樹的結構
     8）若是節點須要依賴其餘資源，列入圖片，css，視頻等，調用資源加載器來加載它們，可是它們是異步的，不會阻礙當前DOM樹的繼續建立；
          若是是js資源URL(沒有標記異步方式)，則須要中止當前DOM樹的建立，直到js的資源加載並被js引擎執行後才繼續DOM樹的建立。




    二：利用css和DOM樹構建RenderObject樹知道繪圖上下文
      1）css文件被css解釋器解釋成內部表示結構
      2）css解釋器工做完以後，在DOM樹上附加解釋後的樣式信息，這就是RenderObject樹。
      3）RenderObject節點在建立的同時webkit會根據網頁的層次結構建立RenderLayer樹，同時構建一個虛擬的繪圖上下文。其實這中間還有複雜的內部過程。

       *RenderObject樹的創建並不表示DOM樹會被銷燬，事實上途中的4個內部表示結構一直存在，知道網頁被銷燬




     三：最後，依賴2D和3D圖形庫生成最終的圖像
     1）繪圖上下文是一個與平臺無關的抽象類，它將每一個繪圖操做橋接到不一樣的具體實現類，也就是繪圖具體實現類
     2）繪圖實現類也可能有簡單的實現，也可能有複雜的實現。在Chromium中，它的實現至關複製，須要Chromium的合成器來完成複雜的多進程和GPU加速機制
     3）繪圖實現類將2D圖形庫或者3D圖形庫繪製的結果保存下來，交給瀏覽器來同瀏覽器界面一塊兒顯示




三.WebKit架構和模塊

     1,WebKit架構

       


五.HTML解釋器和DOM模型

     

   5.2HTML解釋器
      5.2.1解釋過程
       

      5.2.2詞法分析
      

   5.4 Shadow DOM
         將內部的節點信息封裝起來，同時又可以將這些節點渲染出來，如HTML5對視頻，音頻的支持，由很複雜的控制界面組成（開始/暫停/音量...）但實際html中找不到這些節點，就是引用了shadow dom的思想


六.Css解釋器和樣式佈局
  
     6.3.2 佈局計算
     
   

7.渲染基礎
     
       7.1.1  RenderObject
                 生成DOM樹以後WebKit要爲DOM樹節點構建RenderObject樹，一個RenderObject對象保存了爲了繪製DOM節點所須要的各類信息，例如樣式佈局信息，
           它們也構成一棵樹。RenderObject樹是基於DOM樹創建起來的一棵新樹，是爲了佈局計算和渲染等機制而構建的一種新的內部表示。RederObject樹節點和DOM
           樹節點不是一一對應關係，一下爲會爲DOM樹節點建立RenderObject對象的規則：
                 1.DOM樹的document節點
                 2.DOM樹中的可視節點，如html,body,div等。而webkit不會爲非可視化幾點建立RednerObject節點
                 3.某些狀況下webkit須要創建匿名的RednerObject節點，該節點不對應於DOM樹中的任何節點，而是webkit處理上的須要，如匿名RenderBlock節點
            
      7.2.1  層次和RenderLayer對象
                網頁是能夠分層的，一是爲了方便網頁開發者開發網頁並設置網頁層次， 而是爲了簡化渲染的邏輯。webkit會爲網頁的層次建立相應的RenderLayer對象。
           當某些類型的RenderObject的節點或者具備某些Css樣式的RenderObject節點出現的時候，webkit會爲這些節點建立RenderLayer對象，通常來講，某個RenderObject
           的節點後代都屬於該節點，除非WebKit根據規則爲某個後臺RenderObject節點建立了一個新的RenderLayer對象

      7.3 渲染方式

      7.3.1繪圖上下文
             在webkit中，繪圖操做被定義了一個抽象層，即繪圖上下文，全部的繪圖操做都是在該上下文中來進行的，分爲兩種類型，2D/3D圖形的上下文
    
       渲染方式：
        


9.Javascript引擎/size]