Google Chrome浏览器时序图

秉承重点放前面的原则，先展示两种情况的时序图，再在后面详细说明。

时序图结果

加载带有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

绘制浏览器时序图如下所示：

参考：

• chrome-performance页面性能分析使用教程

• plantUML绘制时序图教程