图解「浏览器加载URL的过程」

一、概述

• 在浏览网页时用户希望页面的内容能够快速加载且流畅交互。因此，理解浏览器加载网页的过程有助于开发者了解如何提升性能。

• 导致 WEB 性能问题的主要原因有两种，一是网络延迟，保障页面快速加载的最大威胁是网络延迟，所以性能优化的最主要目标就是尽可能提升加载速度；二是浏览器的单线程执行，通过理解浏览器的单线程特性，可以提高网页性能，确保渲染流畅以及即时响应。

• 本篇文章主要介绍浏览器从输入一个 URL 地址到内容展示的全流程，其中包含 DNS 查询、TCP 握手、TLS 协商、HTTP 请求与响应、构建 DOM 和 CSSOM 等。

二、主要过程

1. 解析 URL 结构
2. 域名 DNS 解析

三、流程详解

3.1 解析 URL 结构

当用户在地址栏输入 URL 并回车后，浏览器进程（Browser）会检查 URL 的有效性，如果输入合法，浏览器进程会提取 URL 的各个组成部分，如协议、主机名、端口号、路径、查询参数和片段标识符。

3.1.1 主要部分：

• 协议（Protocol）：定义了数据传输的标准，如HTTP、HTTPS、FTP等。这是URL的开始部分，通常以冒号加双斜杠(://)结束，例如https://。

• 主机名（Hostname）：表示资源所在的服务器地址，可以是域名（如www.example.com）或IP地址。在协议之后，主机名之前可能有端口号，如果没有指定端口号，则会使用默认端口，如HTTP的80端口，HTTPS的443端口。

• 端口号（Port）：虽然不是每个URL都包含，但当使用非默认端口时，会在主机名后以冒号(:)分隔，例如:8080。

• 路径（Path）：指示服务器上资源的具体位置，由一系列由斜杠(/)分隔的目录名或文件名组成，如/path/to/resource。路径可以是相对的也可以是绝对的。

• 查询字符串（Query String）：位于路径之后，以问号(?)开始，包含键值对参数，用于传递额外信息给服务器，键值对之间用与号(&)分隔，例如?key1=value1&key2=value2。

• 锚点（Fragment）：用于页面内的跳转，位于URL末尾，以井号(#)开始，如#section1。浏览器不会将这部分发送到服务器，而是用来定位页面内的特定部分。

3.1.2 详细数据结构：

URL 解析后的数据结构可以通过 new URL()方法进行查看：