从浏览器输入到浏览器呈现出可交互页面的过程。
地址解析和编码
浏览器会解析输入的字符串，判断是 URL 还是搜索关键字。在 JS 中可使用 encodeURI() 或 encodeURIComponent() 来编码 URL。
HSTS
HSTS (Http Strict TransportSecurity) 是一种新的 Web 安全协议，作用是强制浏览器使用 HTTPS 与服务器创建连接。
缓存检查
-
先尝试命中 memory cache;
-
再尝试命中 disk cache (详情见 浏览器--缓存);
-
都未命中则发起网络请求.
URL 解析和 DNS 查询
TCP/IP 网络是通过 IP 地址来确定通信对象的，因此输入的 URL 如juejin.cn/post/690223…需要被转化成对应的 IP 才行。那么怎样才能把一串 URL 转换成 192.168.56.77 这样的 IP 地址呢？
浏览器中有个叫Socket 库的东西，是用于调用网络功能的程序组件集合。Socket 库中有一段程序叫做 DNS 解析器，调用解析器后，解析器会向DNS 服务器(事先设置好的，不需要再去查询。Windows系统中在网络连接>以太网>属性>TCP/IPv4>属性) 发送查询消息，DNS 服务器返回的响应消息中包含查询到的 IP 地址，解析器会取出 IP 地址，并将其写入浏览器指定的内存地址中。接下来，浏览器在向 Web 服务器发送消息时，只要从该内存地址取出 IP 地址，并将它与 HTTP 请求消息一起交给操作系统就可以了。
简要过程：
URL 流向：浏览器委托给 Socket 库，Socket 库委托给 DNS 解析器，DNS 解析器向 DNS 服务器查询出 IP地址;
IP 地址流向：DNS 服务器返回给 DNS 解析器，DNS 解析器交给 Socket 库，Socket 库交给浏览器，浏览器等着发给 Web 服务器。
建立 TCP 连接、客户端发起请求、服务器返回数据、关闭 TCP 连接
浏览器委托协议栈使用 TCP 协议来收发数据(详情见 通信--TCP从连接到关闭)。
第一个网络包是 14kb, 后续的包分别是前一个的 2 倍，直到达到预定的阈值或遇到拥塞。
解析
浏览器拿到第一个网络包后开始进行推测性解析，将数据转换成 DOM 和 CSSOM。在渲染之前，HTML、CSS 和 JavaScript 必须被解析完成。
- 构建 DOM 树
浏览器的 HTML 解析器对遇到的 HTML 标签进行分词来生成 DOM 树，遇到非阻塞资源时会并行请求资源(图片、CSS 文件、带 defer 或 async 的 script 标签),遇到普通的 script 标签会停止解析，直到 JavaScript 下载并执行完再继续解析。
- 预加载扫描器
当解析 HTML 时，预加载扫描器会请求高优先级资源, 以便主线程 HTML 解析器到达请求的资源时减少拥塞。
- 构建 CSSOM 树
浏览器的 CSS 解析器将 CSS 规则转换为可以理解和使用的样式映射。
渲染
渲染的过程是将 DOM 树和 CSSOM 树组合成一个 Render 树，用来计算每个可见元素的布局，并将它绘制在屏幕上。
- 样式
从根节点开始遍历 DOM 树和 CSSOM 树，使 DOM 树的每个可见节点都对应上其 CSSOM 树的规则，并根据 CSS 级联确定每个节点的计算样式。
- 布局
拿到 Render 树的计算样式后，一般从 body 元素开始遍历子孙元素，确定其位置和大小并为不知道大小的替换元素(如图片)占位。第一次确定节点的大小和位置称为布局，随后对节点的重新计算称为回流(详情见 浏览器--回流与重绘)。
- 绘制
浏览器将布局阶段的每个框框转换为屏幕上的实际像素，将每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换元素。
- 合成
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。当页面继续加载时，可能会发生回流，回流可触发重绘和重新合成。
参考：
