<浏览器>url输入执行过程

输入URL到页面展示过程

输入url

  • 判断是搜索还是访问链接，如果是链接，会加上协议，拼成完整链接

url请求过程

  • 浏览器进程将url发送至网络进程
  • 网络进程查找是否有缓存，如果有缓存资源，那么直接返回资源给浏览器进程。没有缓存进入网络请求流程：DNS 解析，获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，还需要建立 TLS 连接、利用 IP 地址和服务器建立 TCP 连接、向服务器发送构建的请求信息（请求行、请求头、Cookie添加至请求头）、网络进程接收了响应行和响应头开始解析响应头内容。
  1. 重定向：状态码301、302，从响应头的 Location 字段里面读取重定向的地址，再次发送请求，例如：http重定向为https
  2. 响应数据类型处理：根据Content-Type决定如何显示响应体的内容，例如：text/html->html内容、application/octet-stream->字节流类型，浏览器会按照下载类型处理。

准备渲染进程

  • 渲染进程策略：通常情况下，打开新的页面都会使用单独的渲染进程，如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点的话，那么 B 页面复用 A 页面的渲染进程。
  • 同一站点：相同的协议和根域名。

提交文档给渲染进程

  • 浏览器进程将url请求响应体数据提交给渲染进程，等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程，浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

构建DOM树

  • 将 HTML 转换为浏览器能够理解的结构——DOM 树

样式计算

  1. 把 CSS 转换为浏览器能够理解的结构
  • css来源：link标签、style标签、style属性
  • 将 CSS 文本转换为浏览器可以理解的结构——styleSheets，可以通过document.styleSheets查看
  1. 转换样式表中的属性值，使其标准化
  2. 计算出 DOM 树中每个节点的具体样式
  • 根据CSS 的继承规则和层叠规则计算每个DOM节点的样式

布局阶段

  • 计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局。
  1. 创建布局树
  • 在显示之前，我们还要额外地构建一棵只包含可见元素布局树。
  • 遍历 DOM 树中的所有可见节点，并把这些节点加到布局中，不可见的节点会被布局树忽略掉，如head中的内容。
  1. 布局计算
  • 计算布局树节点的坐标位置了

分层

  • 渲染引擎需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）
  • 拥有层叠上下文属性的元素会被提升为单独的一、需要剪裁（clip）的地方也会被创建为图层（例如：文字显示超过区域）

图层绘制

  • 渲染引擎会将一个图层的绘制拆分成很多小的绘制指令，再把这些指令按照顺序组成一个待绘制列表。

栅格化（raster）操作

  • 绘制操作是由渲染引擎中的合成线程来完成。
  • 当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程。
  • 合成线程会将图层划分为图块（tile），这些图块的大小通常是 256x256 或者 512x512。
  • 合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。
  • 渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的。
  • 栅格化过程都会使用 GPU 来加速生成，使用 GPU 生成位图的过程叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。GPU 操作是运行在 GPU 进程中，渲染进程把生成图块的指令发送给 GPU，然后在 GPU 中执行生成图块的位图，并保存在 GPU 的内存中。

合成和显示

  • 一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。
  • 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

重排、重绘、合成

  1. 更新了元素的几何属性（重排）
  • 改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。无疑，重排需要更新完整的渲染流水线，所以开销也是最大的。
  1. 更新元素的绘制属性（重绘）
  • 如果修改了元素的背景颜色，那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
  1. 直接合成阶段
  • 更改一个既不要布局也不要绘制的属性，渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。
  • 使用了 CSS 的 transform 来实现动画效果，这可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。相对于重绘和重排，合成能大大提升绘制效率。