秉承重點放前面的原則，先展示兩種情況的時序圖，再在後面詳細說明。
時序圖結果
加載帶有JavaScript腳本的HTML
拉伸窗口
分析
加載帶有JavaScript腳本的HTML
加載一個Javascript腳本的HTML流程：
- 用戶在UI界面輸入URL
- UI向瀏覽器發起請求
- 瀏覽器先去找緩存裏找這個頁面，如果沒有，就去網絡棧獲取URL
- 網絡棧返回頁面數據
- 瀏覽器將頁面數據傳給blink渲染引擎拿去渲染
- blink分別依賴GDI、Skia繪製字體，圖像
- blink返回給瀏覽器一個頁面bitmap
- 瀏覽器展示bitmap到UI界面上去
- 用戶觀察到頁面變化
使用plantUML繪製，繪製代碼如下：
@startuml
title Chrome Browser Timeline
User -> UI: enter url
UI -> Browser: make a request
Browser -> Network_Stack:obtain a page without cache
Network_Stack -> Browser:page data
Browser -> Blink : render
Blink -> V8 :parse JavaScript scripts
V8 --> Blink :
Blink -> GDI : draw fonts
GDI --> Blink:
Blink -> Skia : draw images
Skia --> Blink:
Blink --> Browser: page bitmap
Browser --> UI: display bitmap
UI --> User:
@enduml
時序圖如下：
拉伸窗口
這裏使用google chrome瀏覽器訪問必應首頁（ https://cn.bing.com/?mkt=zh-CN ），使用chrome的performance工具來錄製拉伸窗口的過程。
從Call Tree可以看出對瀏覽器拖拽窗口主要有如下8個活動：
- Layout： 頁面佈局計算執行時觸發
- Recalculate style ： Chrome重新計算元素樣式時觸發
- Event：resize：發生了拉伸窗口事件
- Update Layer Tree：更新頁面樹
- Paint ：重新繪製
- Composite Layers： Chrome的渲染引擎完成圖片層合併時觸發
- Time Fired：定時器激活回調後觸發
- Minor GC：發生了Minor GC事件
根據下圖分析，可以知道拉伸窗口這個動作並沒有使chrome向網絡棧請求資源，涉及到的只有內核部分的渲染，具體過程是：
Event : resize —> Update Layer Tree —> Paint —> Composite Layer —> Layout —> Recalculate style —> Update Layer Tree —> Paint
由於這次不需要使用網絡棧和V8，因此使用order聲明順序，故plantUML代碼如下：
@startuml
title Chrome Browser Timeline
participant Skia order 8
participant GDI order 7
participant V8 order 6
participant Blink order 5
participant Network_Stack order 4
participant Browser order 3
participant UI order 2
participant User order 1
User -> UI: enter url
UI -> Browser: make a request
Browser -> Blink : recalculate style
Blink -> GDI : draw fonts
GDI --> Blink:
Blink -> Skia : draw images
Skia --> Blink:
Blink --> Browser:page bitmap
Browser --> UI:display bitmap
UI --> User:
@enduml
繪製瀏覽器時序圖如下所示：
參考：