浏览器的工作原理
导航
加载 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）响应用户交互。