秉承重点放前面的原则,先展示两种情况的时序图,再在后面详细说明。
时序图结果
加载带有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
绘制浏览器时序图如下所示:
参考: