瀏覽器解析過程
當瀏覽器加載html資源時，會進行如下的解析過程
- 遇見 HTML 標記，構建 DOM 樹
- 遇見 style/link 標記調用相應解析器處理CSS標記，並構建出CSS樣式樹
- 遇見 script 標記 調用javascript引擎 處理script標記、綁定事件、修改DOM 樹/CSS樹等
- 將 DOM樹 與 CSS樹 合並成一個渲染樹
- 根據渲染樹來渲染，以計算每個節點的幾何信息
- 最終將各個節點繪制到屏幕上
用一張非常經典的圖來表示
瀏覽器引擎
瀏覽器引擎分為兩部分，渲染引擎和js引擎。
- 渲染引擎用於解析、處理html、css文件、布局繪制
- JavaScript引擎用於解析js文件，常見的JavaScript引擎有JavascriptCore、V8
我們知道，javascript是一門高級語言，它需要通過編譯才能被計算機識別，那么編譯的這個過程就由V8引擎來完成
V8引擎
V8處理JS文件經過以下幾個步驟
1、Parser模塊反對Javascript代碼進行詞法分析，解析成AST(抽象語法樹)
AST的生成如下圖所示，定義一個名為name的常量，解析成右邊的樹結構
這樣所有的代碼的結構都非常統一，便於處理
2、Ignition將AST解析成bytecode(字節碼)，最后根據不同的操作系統/環境編譯成計算機可識別的機器碼
比如windows/macos，cpu架構不一致所能執行的機器指令是不一樣的，字節碼可以跨平台，等到執行的時候，V8引擎再將字節碼解析成機器碼
3、Ignition收集優化信息，通過Turbofan將bytecode編譯成機器碼
如果一個函數會被多次執行，AST-->bytecode-->機器碼這樣的過程比較浪費性能，為了進行優化，會標記此函數為熱點函數，此時Ignition會收集優化信息，如函數的參數，這樣直接通過Turbofan將字節碼編譯成機器碼。
如果優化信息發生的變化，比如函數入參的類型一直是 number，突然變成了string，這時候Turbofan會將機器碼反向的編譯成字節碼，再同Iginition解析成機器碼執行。
圖示如下
Parser模塊
Parser模塊解析成AST的過程中還經過了以下步驟
- Blink(Chrome瀏覽器內核)將源碼交給V8引擎，Stream進行編碼轉換
- Scanner進行詞法分析后，將代碼轉成token
- PreParser(預解析)，如果函數沒有調用則不會被解析
- Parser模塊解析成AST
- Ignition、Toburfan再解析
圖示如下
