search

Amybiubiu / Blog

6 stars 0 forks source link

从输入url到页面展示 #3

Open Amybiubiu opened 3 years ago

Amybiubiu commented 3 years ago
  1. URL请求过程

首先，网络进程会查找本地缓存是否缓存了该资源，如果缓存了，返回资源给浏览器；没有的话，进行网络请求。

根据 URL 进行 DNS 解析，获取 IP 地址，利用 IP 地址和服务器建立 TCP 连接。建立连接后，浏览器构建请求行、请求头等信息，并与域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建好的请求信息。

服务器收到请求后，根据请求生成响应数据（响应行、响应头、响应体等信息），并发给网络进程。网络进程（chromium多进程架构）接收到了响应头和响应行后，进行解析，如果状态码为 301（永久重定向）、 302（暂时重定向），则重定向至Location字段显示的网址。

如果是 200，根据响应数据类型进行处理。如果 Content-Type 是 application/octet-stream，按照下载类型处理。如果是 text/html ，则开始准备渲染进程。

  1. 准备渲染进程

默认情况下，Chrome会为每一个页面分配一个渲染进程，但是如果是同一站点（根域名相同，geekbang.org ）下的两个页面，新页面会复用父页面的渲染进程，称为 process-per-site-instance。

  1. 提交文档

是指浏览器进程将收到的 HTML 数据提交给渲染进程的过程。具体流程如下：

  1. 渲染阶段

按照渲染的时间线，分为如下子阶段：构建 DOM 树、样式计算、 布局阶段、分层、绘制、分块、光栅化、合成。

  1. DOM树构建

HTML 文件经HTML解析器输出一颗包含节点和内容，但不包括样式的DOM树。

  1. 样式计算

渲染引擎接收到 CSS 文本时，会执行一个转换，将它变成浏览器可以理解的结构----styleSheets。计算遵循 CSS 的继承与层叠规则。输出的内容是每个 DOM 节点的样式，并保存在 ComputedStyle 的结构中。

  1. 布局阶段

构建一颗只含可见元素的布局树，对于不可见的的节点如 head 的内容、display none 的元素。

有了布局树后计算布局树节点的坐标位置。

  1. 分层

将布局树（ LayoutTree ）转换为图层树（ LayerTree）。什么时候渲染引擎会为特定的节点创建新的图层？

一些绘制的指令集合，比如绘制粉色矩形或者黑色的线等

  1. 分块

有时候，有的图层很长，而视口只能展示一部分，没必要一下绘制出所有内容。基于这个原因，合成线程讲图层划分为图块，图块的大小是 256256 或者 512512。（如果下滑的话，渲染进程从那一步开始更新？栅格化前吧）

  1. 栅格化操作

合成线程启动栅格化线程，在栅格化进程池中将(靠近视口的？）图块转换为位图。通常会使用 GPU 加速生成，生成的位图保存在 GPU内存中。而 GPU 操作是在 GPU 进程中，为跨进程操作。

  1. 合成和显示

所有的图块（靠近视口的图块？）被栅格化后，合成线程会生成 DrawQuad 命令发送给浏览器进程，浏览器进程根据这个命令，将位图存到内存（浏览器进程的内存），最后将其显示到屏幕上。

Amybiubiu commented 3 years ago

此内容为极课时间【浏览器工作原理及实践】总结，并非原创 参考文档

Amybiubiu commented 3 years ago

image