前端總結- 瀏覽器

總結一下前端學習筆記，好記性不如何爛筆頭。

 

1. 前端的運行環境。

   1.1 瀏覽器如何渲染出頁面。

        a. 現代瀏覽器的組成部分

              

      User interface ： 就是你看到的瀏覽器的樣子，地址欄，狀態欄。

      Brower engine：  在用戶界面和呈現引擎之間傳送指令

      Rendering engine： 就是將html 按照css的規則呈現出來

      javaScript interpreter： 就是執行JS 代碼。

      networking:  與後臺服務之間經過協議交換數據

      Data persistentence： 就是Cookie， 緩存以及本地數據庫。

      UI backend： 封裝底層操做系統繪製UI的方法

     

      b. 瀏覽器渲染出一個頁面的流程

     

      圖：呈現引擎的基本流程

    

　              

               圖：Webkit 主流程

  

 

　　　　

           圖：Mozilla 的 Gecko 呈現引擎主流程 (3.6)

 

       c. html 如何解析

            圖：HTML 解析流程（摘自 HTML5 規範）

      Note: html 是如何加載js的？

 

      d. css 解析

           

           圖：解析 CSS

 

　  解析了CSS獲得CSS的規則，而後將規則應用到DOM樹上，生成attachment 或者 Frame. 下面就構建一個呈現樹，而後繪製出來。 

 

 

    e.  呈現樹構建

         

           圖：呈現樹及其對應的 DOM 樹 (3.1)。初始容器 block 爲「viewport」，而在 Webkit 中則爲「RenderView」對象。     

            
     最後渲染引擎將這個呈現樹繪製出來。

     參考

     http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

 

   1.2瀏覽器用戶交互模型。

    瀏覽器上面的Js 是單線程執行的, 相應用戶各類事件，執行對應的handler。爲了保證一切正常工做，一個頁面是基於這樣的一個event-loop 模型工做的。

   可是整個頁面至少有三個線程： 渲染線程， JS執行線程 和瀏覽器線程。

   JS線程負責執行Js代碼執行； 瀏覽器線程負責相應各類事件；渲染線程如上所述負責將html繪製出來。

   其中JS線程在執行的時間會修改dom樹，這時候渲染線程被鎖。也就是，JS引擎和渲染線程之間互斥。

   那麼瀏覽器線程，如何將接收到的事件告知JS線程？ 若是JS線程這在執行，會不會中斷當前的執行？ 若是會，現場是否須要保護，以保證執行完事件程序後正常接着執行？ 若是不會，那麼事件會不會給丟掉呢？

   其實JS線程和window應用程序執行相似，也有一個消息隊列。這是一個真正的隊列，FIFO； 不像window message queue裏面的message 有不一樣的優先級。

     

     

    JS thread就是一個while（1），從queue裏面不停的取event（msg）執行。 而瀏覽器線程把各類event放到隊列裏面。 根據FIFO原則，JS thread相應事件。

    若是當前一個線程執行的時間比較長（不一樣瀏覽器的值是不同的）， 用戶的操做就沒有相應，那就是 假死了。

     固然對應於JS對象的內存模型：

     

   

   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop

 

   1.3瀏覽器與後臺數據交互。

　　  若是不能和後臺數據交互，那麼網站只是一個靜態網站。 有了ajax，讓網站內容能夠動態生成。