1. 程式人生 > 其它 >對瀏覽器的工作原理的理解( 以chrome瀏覽器為例 ) --學習總結

對瀏覽器的工作原理的理解( 以chrome瀏覽器為例 ) --學習總結

首先,在瀏覽器中輸入網址(伺服器地址),瀏覽器會去下載相對應的靜態資原始檔,第一個下載的是html檔案(一般為index.html),在html檔案中遇到類似的link標以及script標籤的時候,會去下載相對應的css檔案和javaScrpt檔案。

在下載完對應的檔案之後,chrome瀏覽器中的瀏覽器核心和js引擎(v8引擎)會對相對應的資原始檔進行解析。

瀏覽器核心主要進行html解析,佈局和渲染等等相關的工作,html檔案會通過html解析器進行解析,生成相對應的DOM樹結構,同時css檔案會被css解析器進行解析,生成相對應的樣式規則,兩者附加在一起,生成對應的render樹結構,然後通過瀏覽器核心進行渲染和繪製。

在html解析的過程中,如果遇到了script標籤,html的解析過程就會暫時中止,由js引擎去執行相關的js程式碼。解析完成之後,會針對DOM做出相對應的改變,生成DOM樹,繼續上述操作。

  

 

其中 ----js引擎針對js程式碼進行解析和執行的原理 (實質上是將 js程式碼轉換為機器能夠識別的CPU指令)

針對js原始碼,v8引擎對其進行解析,通過詞法分析和語法分析處理,生成對應的抽象語法樹(AST)。據抽象語法樹,通過ignition( 直譯器 ),將其解釋為byteCode(位元組碼,考慮到不同作業系統CPU的不同,故而轉換為通用位元組碼 ),在這個過程中會收集TurboFan(編譯器)所需要的資訊,比如函式引數的型別資訊等,如果這個函式就被呼叫一次,會被Ignition(直譯器)正常轉換為位元組碼,得到執行結果;如果這個函式被多次呼叫,會被Turbofan(編譯器)標記為熱點函式,並且針對這個函式會被轉化為MachineCode(優化的機器碼),進行得到執行結果。如果這個過程中,比如函式引數的型別發生了變化,跟之前的產生了不一致,MachineCode(優化的機器碼)會重新轉換為byteCode, 進而得到執行結果。

  通過這個總結明確了幾個問題:

  1.瀏覽器工作原理

 

  2.瀏覽器的渲染過程

  3.在渲染過程中遇到了script標籤,瀏覽器會怎麼做(v8引擎針對js程式碼解析的工作原理)