浏览器请求URL流程图

状态码？

合成

query

主线程

准备renderer process

位图

HTTP请求

存储

缓存

N

Y

commit

下载管理器

<script> 停止解析HTML，去加载、执行js。 在`<script>` 标签上添加了 `async` 或 `defer` 等属性，浏览器会异步的加载和执行JS代码，而不会阻塞渲染

renderer process

layout tree  布局树

响应头数据

GPU内存

text/html

渲染流程

提交导航

确认提交

状态码 301 / 302取响应头中的location地址

视为一个图层的条件：1、拥有层叠上下文属性：明确定位属性、定义透明属性、css滤镜的元素等2、需要剪裁（clip）的地方

browser process

browser process 1、协调浏览器子进程，负责用户交互（地址栏、书签栏、前进后退等）部分工作2、负责处理浏览器一些不可见的底层操作：网络请求和文件访问等network process ： 处理网络请求、从网上获取数据renderer process ： 负责关于网页呈现的所有事情plugin process ： 负责控制一个网页用到的所有插件GPU process ： 负责GPU相关任务

url

DOM tree

network process

检查是否同一站点（根域名和协议相同），是则复用同站点下的渲染进程，否则开始新的渲染进程

光栅化线程池

建立数据传输通道

content-type？

重绘：记录绘制顺序和绘制指令

TLS连接

重排：构建元素的坐标信息及盒子大小

合成器线程

次级资源加载

layer tree 图层树

是url or query ?

computed style计算样式

图层

浏览器进程收到“确认提交”后，更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面

js 下载与执行

控制tab 上的spinner状态为加载中

200

浏览器线程

DNS查询

读取响应

字节流类型

🔗

页面显示

application/octet-stream

HTML

处理输入

主线程 main thread工作线程 worker thread排版线程 compositor thread （合成器线程）光栅线程 raster thread

GPU线程

开始导航

paint records绘制列表

合成器线程，分成

组装协议

IPC

https

图片、js、css等构建DOM过程中逐一加载<img>、<link>等 由network thread进行相关下载

输入URL

1、CSS 文本转换为 styleSheets2、使其标准化3、获取节点的具体样式

301 / 302

DrawQuad指令