当用户在浏览器地址栏输入 URL 并按下 Enter 键后发生了什么

88 阅读2分钟

1. 解析 URL

用户输入 URL 后,浏览器首先会解析 URL,确定其组成部分。例如,URL "www.example.com/path" 包含协议(http)、主机名(www.example.com)和路径(/path)等信息。(-un9hg96dd28f/path%EF%BC%89%E7%AD%89%E4%BF%A1%E6%81%AF%E3%80%82)

2. DNS 解析

浏览器会查询该域名对应的 IP 地址。如果该域名不在本地缓存中,则会通过 DNS 服务器查询 IP 地址。这个过程涉及到 DNS 请求、响应以及可能的递归查询。

3. 建立 TCP 连接

一旦获取到服务器的 IP 地址,浏览器就会尝试建立一个 TCP 连接到该 IP 地址指定的端口(默认 HTTP 是端口 80,HTTPS 是 443)。TCP 握手包括三次握手的过程。

4. 发送 HTTP 请求

TCP 连接建立后,浏览器发送一个 HTTP 请求到服务器。请求通常包含请求方法(GET、POST 等)、请求 URL、HTTP 版本以及一些头信息(headers)。

示例 HTTP 请求:

Http
深色版本
GET /path HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Connection: keep-alive

5. 接收 HTTP 响应

服务器处理请求后返回一个 HTTP 响应给浏览器。响应包含一个状态码(表示请求的状态,如 200 表示成功)、响应头(headers)以及可能的响应体(body)。

示例 HTTP 响应:

Http
深色版本
HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.7d mod_auth_passthrough/2.0 mod_bwlimited/1.4 FrontPage/5.0.2.2635
Last-Modified: Wed, 22 Jul 2009 02:14:57 GMT
ETag: "3f307e2c9ca231:ea5"
Content-Type: text/html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Website</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

6. 解析 HTML 文档

浏览器收到响应后开始解析 HTML 文档。解析过程中,浏览器会构建 DOM 树,并且可能会加载更多的资源,比如 CSS 样式表、JavaScript 脚本等。

7. 渲染页面

DOM 构建完成后,浏览器会结合 CSS 样式表渲染页面,并可能执行 JavaScript 来动态修改页面内容或增加交互功能。

8. 事件处理

页面完全加载后,浏览器会处理用户的输入事件,如点击、滚动等,并响应 JavaScript 的事件处理程序。

以上就是浏览器加载网页的大致流程。需要注意的是,现代浏览器还支持诸如预连接(preconnect)、预加载(preload)等技术来优化加载性能。此外,HTTPS 加密通信会增加 TLS/SSL 握手的过程,以保证数据的安全传输。