时间：2024.11.06
最近在看浏览器相关的知识点，看得很模糊。
同时 “在浏览器中输入 url,按下 enter键，发生了什么” 这个问题是一道经典的题目，涉及的知识点也非常多，刚好也对这个过程很感兴趣，就写下这篇文章，记录下内心的思绪。
备注：本文章默认讲解 http 请求。
浏览器
浏览器的进程
进程概述
在 Chrome 浏览器中，打开一个页面时，通常会涉及以下几种进程：
- 浏览器主进程：负责管理所有的渲染进程、扩展和插件等。
- 网络进程：处理网络请求和响应，确保数据的传输。
- 渲染进程：每个标签页通常会有一个独立的渲染进程，用于处理页面的内容、样式和脚本。
- GPU 进程：用于处理图形渲染任务，提高页面的性能和流畅度。
- 扩展进程：如果你安装了扩展，每个扩展可能会启动一个或多个进程。
以下内容，为了方便，主要讨论 浏览器主进程、网络进程、渲染进程。
进程示意图
在 chrome 浏览器中打开一个页面，查看进程，如下图。
大致流程
在浏览器中输入 url, 并按下 enter键，大概会经历如下的几个步骤。
- URL 解析
- 浏览器缓存
- DNS 域名解析
- TCP 三次握手
- 发送请求
- 响应请求
- TCP 四次挥手
- 渲染页面
详细讲解
1、URL 解析
当用户在地址栏中输入一个查询关键字时，地址栏会判断输入的关键字是搜索内容，还是请求的URL。
- 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的URL。
- 如果判断输入内容符合URL规则，比如输入的是 baidu.com，那么地址栏会根据规则，把这段内容加上协议，合成为完整的URL，如 baidu.com
2、浏览器缓存(HTTP缓存)
这里只讲解 HTTP 缓存
在发送HTTP请求之前，浏览器会检查缓存以决定是否需要从服务器获取新的资源。
HTTP缓存
- 强缓存：
- 字段：Expires、Cache-Control，其中 Cache-control 优先级更高
- 字段说明：expires是HTTP1.0的内容，Cache-Control 是 HTTP1.1的内容。
- 协商缓存：
- 字段：Last-Modified & If-Modified-Since 和 Etag & If-None-Match
- 注意：Last-Modified & If-Modified-Since 是 HTTP 1.0 的内容 ； Etag & If-None-Match 是 HTTP1.1 的内容
- 状态码：304 、200
扩展
- 浏览器向服务器发送请求验证当前资源的有效性（即协商缓存），这里不是发送了请求吗。为啥没有 TCP 三次握手呢
在协商缓存的过程中，浏览器确实会向服务器发送请求以验证资源的有效性。如果缓存失效，浏览器会发送请求，通常是使用 GET 请求并附带一些条件头（如 If-Modified-Since 或 If-None-Match）。
当浏览器需要验证缓存时，如果之前的连接仍然有效（即 TCP 连接仍然保持），则可以直接重用该连接，而不需要重新进行 TCP 三次握手。这种情况下，浏览器可以通过已建立的连接发送请求。
如果没有可用的连接，或者连接已关闭，浏览器才会进行 TCP 三次握手以建立新的连接。因此，是否进行三次握手取决于连接的状态。
3、DNS 解析
浏览器会解析域名以获取IP地址。
通常情况下，如果URL没有特别指明端口号，那么HTTP协议默认是80端口
4、TCP 三次握手
在发送http请求之前，客户端和服务器通过三次握手建立TCP连接。
备注：简历 TCP 三次握手，需要 ip 和 端口。 这两样东西已经在 "DNS解析" 阶段拿到了。
5、发送请求
连接建立后，浏览器会发送HTTP请求。
先占个位，后续详细讲解。
6、响应请求
服务器处理请求并返回HTTP响应。
先占个位，后续详细讲解。
7、TCP 四次握手
在通信结束后，客户端和服务器通过四次挥手断开连接。
先占个位，后续详细讲解。
8、渲染页面
浏览器接收到响应后，会解析HTML、CSS和JavaScript，并渲染页面。
先占个位，后续详细讲解。
