宏观视角下的浏览器

chrome单进程到多进程演变

1、单进程不安全、不流畅、不稳定
2、多进程架构：主进程、网路进程、gpu进程、多个渲染进程、多个插件进程
3、未来面向服务的架构

网络传输协议

1、UDP： 数据包添加udp头，不保证所有数据正确，有序传输，传输快速，如：视频
2、TCP：数据包添加tcp头，三次握手建立连接，四次挥手断开连接，数据发送后，如果没有收到接受通知，会重发数据包，数据包的tcp头内有序号，可以对数据包进行排序，保证数据正确

Http请求流程

构建请求-》查找缓存-》准备IP地址和端口-》等待tcp链接-》建立tcp链接-》发起服务器请求-》服务器处理-》服务器响应-》断开tcp链接
知识重点：http缓存

从输入URL到页面展示

1、各进程之间的配合

• 浏览器拿到请求url，将请求给到网络进程
• 网络进程发起请求
• 网络进程拿到响应头数据，给到浏览器进程
• 浏览器拿到响应头数据，发送“提交导航”到渲染进程
• 渲染进程收到“提交导航”消息后，直接和网络进程通信，获取数据
• 渲染进程向浏览器进程“确认提交”，告诉浏览器进程准备好接受数据
• 浏览器进程收到“提交文档”消息后，移除旧文档，更新页面状态

2、用户数据请求URL

• 判断是否是搜索内容还是符合url规则
• beforeunload事件

3、url请求过程

• 查找缓存
• dns解析
• 建立tcp连接
• 是否重定向
• 请求后，判断content-type字段，html还是字节流类型

3、渲染进程

• 同一站点（跟域名相同），使用同一个渲染进程

4、提交文档

• 浏览器进程收到渲染进程“确认提交”的消息后，更新浏览器页面状态

5、渲染阶段

• 浏览器进程收到渲染进程的消息后，停止图标标签上的加载动画

渲染流程

1、构建Dom树

• 将html转换成浏览器能够理解的结构

2、样式计算

• 把css转换为浏览器能理解的结构
• 转换样式中的属性值，使其标准化
• 计算出dom元素中每个元素的具体样式

3、布局阶段

• 创建布局树
• 布局计算

4、分层

• 拥有层叠上下文的为单独一层
• 需要裁剪的地方会被单独创建为图层

5、图层绘制

• 把一个图层拆分为很多个绘制指令，生成绘制列表

6、栅格化操作

• 将绘制列表交给合成线程
• 合成线程将图层划分为图块，并将图块生成位图，也可借助GPU快速生成位图

7、合成和显示

• 所有图块被栅格化以后，将DrawQuad命令提交给浏览器进程