浏览器的工作原理

[luoway]

导航

加载 web 页面的第一步是导航。
它发生在以下情形：用户通过在地址栏输入一个 URL、点击一个链接、提交表单或者是其他的行为。

DNS 查询

导航的第一步是要去寻找页面资源的位置。
浏览器向域名服务器发起 DNS 查询请求，最终得到一个 IP 地址。第一次请求之后，这个 IP 地址可能会被缓存一段时间。

TCP 握手

一旦获取到服务器 IP 地址，浏览器就会通过 TCP“三次握手”与服务器建立连接。

TLS 协商

为了在 HTTPS 上建立安全连接，另一种握手是必须的。在发送真正的请求内容之前还需要三次往返服务器。

往返次数

经过 8 次往返，浏览器终于可以发出请求。

HTTP请求、响应

一旦我们建立了到 web 服务器的连接，浏览器就代表用户发送一个初始的 HTTP GET 请求，对于网站来说，这个请求通常是一个 HTML 文件。
初始请求的响应包含所接收数据的第一个字节。Time to First Byte（TTFB）是导航开始与收到第一个 HTML 数据包之间的时间。

解析

浏览器收到数据的第一块，它就可以开始解析收到的信息。“解析”是浏览器将通过网络接收的数据转换为 DOM 和 CSSOM 的步骤，通过渲染器在屏幕上绘制成页面.

构建 DOM 树

第一步是处理 HTML 标记并构造 DOM 树。
对于 <script> 标签（没有 async 或者 defer 属性）会阻塞渲染并停止 HTML 的解析。

预加载扫描器：
它将在后台检索资源，以便在主 HTML 解析器到达请求的资源时，它们可能已经在运行，或者已经被下载。
等待获取 CSS 不会阻塞 HTML 的解析或者下载，但会阻塞 JavaScript 的解析或者下载。

构建 CSSOM 树

第二步是处理 CSS 并构建 CSSOM 树。
与 HTML 一样，浏览器需要将接收到的 CSS 规则转换为可以使用的内容。因此，它对 CSS 重复了 HTML 到对象的过程。

JavaScript 编译

JavaScript 被解释、编译、解析和执行。
脚本被解析为抽象语法树，并将其传递到解释器中，输出在主线程上执行的字节码。

构建辅助功能树

无障碍对象模型（AOM）类似于 DOM 的语义版本。当 DOM 更新时，浏览器会更新辅助功能树。
在构建 AOM 之前，屏幕阅读器无法访问内容。

渲染

渲染步骤包括样式、布局、绘制、合成。

样式

将 DOM 和 CSSOM 组合成一个渲染树，渲染树从 DOM 树的根开始构建，遍历每个可见节点。

布局

布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。
第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。

绘制

将各个节点绘制到屏幕上。
为了确保平滑滚动和动画，必须让浏览器在 1000/60=16.67 毫秒内完成。

合成

当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保正确显示内容。

有一些特定的属性和元素可以实例化一个层，包括<video>和<canvas>，CSS 属性为opacity 、3D transform、will-change的元素。

交互

如果主线程正在解析、编译和执行 JavaScript，则主线程不可用，无法及时（小于 50ms）响应用户交互。

参考资料

• 渲染页面：浏览器的工作原理