浏览器输入 URL 后的那些事儿

本次主题是浏览器输入URL之后发生了什么？

从用户输入到浏览器显示页面的完整过程，涉及很多底层的网络基础知识。

一、涉及的网络基础知识

1. DNS 解析：

DNS 是一种分布式数据库，负责将人类容易记忆的域名转换为机器能够理解的 IP 地址，就像用电话簿可以通过名字查找到对应的电话号码。

2. DNS解析的过程：

（1）浏览器缓存：浏览器首先会检查自己是否缓存域名对应的IP地址，如果有缓存并且没有过期，就直接使用缓存结果。

（2）操作系统缓存：如果浏览器没有缓存，就会查询操作系统的缓存。

（3）路由器缓存：如果操作系统也没有缓存，会继续查询路由器的缓存。

（4）ISP DNS 服务器：如果路由器也没有缓存，浏览器会向 ISP 的 DNS 服务器发起查询。

（5）递归查询：如果 ISP 的 DNS 服务器也没有结果，它会进行递归查询，向其他 DNS 服务器询问，直到找到结果为止。

通过以上步骤，浏览器最终获取 www example com 对应的IP地址，比如 93.184.216.34。

TCP 连接：获取到IP地址后，浏览器需要与服务器建立连接，使用 TCP 协议。

二、三次握手

1. 三次握手：TCP 连接的建立需要经过三次握手过程。
2. 第一次握手，浏览器向服务器发送一个 SYN 请求包，表示希望建立连接。
3. 第二次握手，服务器收到 SYN 包后，回应 SYN/ACK 包表示同意建立连接。
4. 第三次握手，客户端收到 SYN/ACK  包后，再发送 ACK 包确认连接建立。

通过这三次握手，浏览器与服务器之间的TCP连接正式建立。

发送 HTTP 请求：在 TCP 连接建立之后，浏览器会发送 HTTP 请求来获取网页内容。HTTP 是一种无状态的协议，客户端向服务器发送请求，服务器处理请求后返回响应。

构建 HTTP 请求：一个典型的 HTTP 请求包括以下部分。

请求行：包含请求方法，请求 URL 和 HTTP 版本。

请求头：包含一些描述客户端环境、请求主体等信息的元数据，如 User-Agent、Host 等。

请求主体：在POST请求中包含需要发送的数据。

示例，HTTP 请求：服务器接收到 HTTP 请求后，会进行处理，并返回 HTTP 响应。服务器处理请求：服务器会根据请求的内容进行相应的处理操作。静态资源请求：如 HTML 文件、CSS 样式表、图片等，服务器会直接从文件系统中读取并返回。动态资源请求：如使用 PHP、Node，js 等动态语言生成的内容，服务器会先执行相应的代码，生成内容后再返回。

构建 HTTP 响应：一个典型的 HTTP 响响应包括以下部分，状态行：包含 HTTP 版本、状态码和状态描述。响应头：包含一些描述响应内容的元数据，如 Content-Type，Content-Length 等。响应主体：包含实际的响应数据，如 HTML 文档图片等。示例 HTTP 响应。

浏览器渲染：浏览器接收到服务器返回的 HTTP 响应后会进行渲染，将网页内容展示给用户。

三、渲染过程

解析 HTML，浏览器会将HTML解析成 DOM 树，解析 CSS，浏览器会解析 CSS，生成 CSSOM 树。

构建渲染树：将 DOM 树和 CSSOM 树结合构建渲染树。布局：根据渲染数计算每个节点在屏幕上的位置和大小。绘制：将渲染树的每个节点绘制到屏幕上。

JavaScript 的执行，在解析HTML的过程中，如果遇到 JavaScript 代码，浏览器会暂停 HTML 的解析，先执行 JavaScript， JavaScript 可以修改DOM和 CSSOM，因此会影响最终的渲染结果。当所有资源都加载并渲染完毕后，整个过程结束。用户可以看到完整的网页内容，并与之进行交互。以上就是在浏览器输入 URL 到页面展示的完整过程。

以上为分享全部内容。