深度解析:从浏览器输入链接到页面展现的奇幻历程

〇、前言

当我们在浏览器中输入一个网址,例如:example.com,按下回车键后,会发生什么呢?

主要会发生以下这些过程:域名解析、建立HTTP连接、发送HTTP请求、数据传输、渲染网页、断开HTTP连接。

一、域名解析

URL 组成

  1. 协议(Scheme): 可以用一个标签来表示,上面写着"协议:HTTP/HTTPS/FTP 等"。这个标签可以放在 URL 的最左边,用不同的颜色突出显示以区分其他部分。例如:"协议:https"。

  2. 主机(Host) : 用一个方框表示,里面写上主机名或 IP 地址,如"www.example.com"或"192.168.1.100"。这个方框紧跟在协议标签后面。例如:"协议:https" → "主机:www.example.com"。

  3. 端口(Port) : 如果有端口号,可以在主机方框后面用一个小括号括起来写上端口号,如":8080"。如果是默认端口,可以不显示端口部分。例如:"协议:https" → "主机:www.example.com" → "端口::8080"(如果使用非默认端口)。

  4. 路径(Path) : 用一个向右的箭头表示路径的指向,后面跟着一个类似文件路径的描述,如"/articles/1234.html"。例如:"协议:https" → "主机:www.example.com" → "端口::8080" → "路径:/articles/1234.html"。

  5. 查询参数(Query Parameters) : 用一个"?"表示查询参数的开始,后面跟着一系列键值对,如"q=keyword&page=2"。例如:"协议:https" → "主机:www.example.com" → "端口::8080" → "路径:/articles/1234.html" → "查询参数:?q=keyword&page=2"。

  6. 片段标识符(Fragment Identifier) : 用一个"#"表示片段标识符的开始,后面跟着一个标识符,如"section3"。 例如:"协议:https" → "主机:www.example.com" → "端口::8080" → "路径:/articles/1234.html" → "查询参数:?q=keyword&page=2" → "片段标识符:#section3"。

输入网址

用户在浏览器地址栏输入网址(例如:www.example.com)后,浏览器首先会检查自身的缓存。如果之前访问过该网址且相关域名信息仍在缓存有效期内,就可以直接获取域名对应的IP地址。

如果浏览器缓存中没有,会查询操作系统的hosts文件。这个文件可以手动配置域名和IP地址的映射关系,如果存在匹配项,就可以得到IP地址。

DNS查询(如果hosts文件中没有)

如果浏览器缓存和hosts文件都无法提供对应的IP地址,就会进行DNS(Domain Name System)查询。浏览器会向本地DNS服务器(通常由网络服务提供商提供)发送请求。

本地DNS服务器如果有该域名对应的IP地址缓存,就会直接返回给浏览器。如果没有,本地DNS服务器会向根域名服务器查询。根域名服务器根据请求中的顶级域名(如.com、.org等)指示本地DNS服务器向对应的顶级域名服务器查询。

顶级域名服务器再根据二级域名(如www)指示本地DNS服务器向负责该域名的权威DNS服务器查询,最终从权威DNS服务器获取到域名对应的IP地址,并将其缓存到本地DNS服务器以便后续查询,同时返回给浏览器。

根服务器

IPv4 根域名服务器共有 13 个逻辑根服务器(以 A - M 标识),它们由不同的组织运营。但实际上为了提高性能、可靠性和应对流量负载,每个逻辑根服务器可能有多个镜像站点分布在世界各地。这些根服务器主要由美国等发达国家的相关机构和组织管理运营,例如其中一些由美国的互联网名称与数字地址分配机构(ICANN)等进行管理。

IPv6 根域名服务器同样遵循 DNS 的分层解析架构。在全球范围内也有一定数量的根服务器分布。其分布和运营也注重可靠性和性能保障,以满足日益增长的 IPv6 网络应用需求。目前,很多 IPv4 根域名服务器的运营组织也在积极参与 IPv6 根域名服务器的建设和运营,同时也有更多国家和组织参与到 IPv6 根域名服务器相关的工作中来,以适应全球 IPv6 网络发展的趋势。

二、建立HTTP连接

TCP连接建立(基于HTTP协议)

浏览器得到IP地址后,根据网址中的协议(如HTTP或HTTPS),如果是HTTP协议,会使用TCP(Transmission Control Protocol)协议与目标服务器建立连接。这一过程遵循TCP的三次握手原则。

浏览器首先向服务器发送一个SYN(同步)包,包含一个随机生成的初始序列号。服务器收到后,回复一个SYN - ACK(同步 - 确认)包,其中包含服务器自己的初始序列号和对浏览器SYN包的确认号。最后,浏览器再发送一个ACK(确认)包给服务器,至此TCP连接建立成功。

对于建链接的3次握手,主要是要初始化Sequence Number 的初始值。通信的双方要互相通知对方自己的初始化的Sequence Number(缩写为ISN:Inital Sequence Number)------所以叫SYN,全称Synchronize Sequence Numbers。也就上图中的 x 和 y。这个号要作为以后的数据通信的序号,以保证应用层接收到的数据不会因为网络上的传输的问题而乱序(TCP会用这个序号来拼接数据)。

SSL/TLS握手(基于HTTPS协议)

如果是HTTPS协议,在TCP连接建立之后,还需要进行SSL/TLS(Secure Sockets Layer/Transport Layer Security)握手。这一过程用于在浏览器和服务器之间建立加密通道,确保数据传输的安全性。

浏览器向服务器发送客户端Hello消息,包含支持的SSL/TLS版本、加密算法等信息。服务器根据自身支持情况回复服务器Hello消息,确定使用的SSL/TLS版本和加密算法,并发送服务器证书给浏览器。浏览器验证服务器证书的有效性,然后生成一个随机的主密钥,并使用服务器证书中的公钥进行加密发送给服务器。服务器使用自己的私钥解密得到主密钥,之后双方使用主密钥生成会话密钥,用于后续的数据加密和解密。

三、发送HTTP请求

连接建立后,浏览器根据用户的操作(如访问网页、提交表单等)向服务器发送HTTP请求。请求包含请求方法(如GET、POST等)、请求路径(如/index.html)、HTTP版本以及请求头(包含浏览器类型、接受的内容类型等信息)和可能的请求体(如POST请求中的表单数据)。

服务器接收到请求后,根据请求的内容进行处理。例如,如果是请求一个网页文件,服务器会查找对应的文件资源。如果请求需要查询数据库,服务器会与数据库进行交互获取相关数据。

服务器处理完请求后,向浏览器发送HTTP响应。响应包含HTTP版本、状态码(如200表示成功、404表示未找到资源等)、响应头(包含服务器类型、内容类型、内容长度等信息)和响应体(如网页的HTML内容)。

常见HTTP状态码

状态码范围 状态码 含义
1xx - 信息性状态码 100 Continue 客户端可继续发送请求。
1xx - 信息性状态码 101 Switching Protocols 服务器切换协议。
2xx - 成功状态码 200 OK 请求成功,返回资源。
2xx - 成功状态码 201 Created 创建新资源成功。
2xx - 成功状态码 204 No Content 请求成功但无内容返回。
3xx - 重定向状态码 301 Moved Permanently 资源永久移动。
3xx - 重定向状态码 302 Found 资源临时移动。
3xx - 重定向状态码 304 Not Modified 资源未修改,使用缓存。
4xx - 客户端错误状态码 400 Bad Request 请求有语法错误。
4xx - 客户端错误状态码 401 Unauthorized 未认证。
4xx - 客户端错误状态码 403 Forbidden 已认证但无权限。
4xx - 客户端错误状态码 404 Not Found 资源未找到。
5xx - 服务器错误状态码 500 Internal Server Error 服务器内部错误。
5xx - 服务器错误状态码 502 Bad Gateway 网关错误。
5xx - 服务器错误状态码 503 Service Unavailable 服务不可用。
5xx - 服务器错误状态码 504 Gateway Time-out 网关超时。

四、网页渲染

浏览器收到响应后,开始解析HTML(HyperText Markup Language)内容。浏览器根据HTML标签构建DOM(Document Object Model)树,将HTML文档中的各个元素表示为DOM节点,如<html>是根节点,<body><head>等是其子节点,每个节点包含标签名、属性和子节点等信息。

在解析HTML的过程中,如果遇到外部资源的引用,如<link>标签引用的CSS(Cascading Style Sheets)文件、<script>标签引用的JavaScript文件、<img>标签引用的图片等,浏览器会再次发起请求去获取这些资源。

浏览器根据DOM树和加载的CSS文件构建CSSOM(CSS Object Model)树,然后将DOM树和CSSOM树合并成渲染树(Render Tree)。渲染树只包含需要显示的节点(例如,<head>中的一些元素可能不需要显示,不会包含在渲染树中)。

浏览器根据渲染树进行布局(Layout),确定每个节点在页面中的位置和大小。最后,浏览器进行绘制(Paint)操作,将各个节点绘制到屏幕上,显示出网页内容。

五、断开HTTP连接

对于4次挥手,其实你仔细看是2次,因为TCP是全双工的,所以,发送方和接收方都需要Fin和Ack。只不过,有一方是被动的,所以看上去就成了所谓的4次挥手。如果两边同时断连接,那就会就进入到CLOSING状态,然后到达TIME_WAIT状态。

资料

相关推荐
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
LunarCod1 小时前
WorkFlow源码剖析——Communicator之TCPServer(中)
后端·workflow·c/c++·网络框架·源码剖析·高性能高并发
码农派大星。2 小时前
Spring Boot 配置文件
java·spring boot·后端
杜杜的man2 小时前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang
幼儿园老大*2 小时前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go
llllinuuu2 小时前
Go语言结构体、方法与接口
开发语言·后端·golang
cookies_s_s2 小时前
Golang--协程和管道
开发语言·后端·golang
为什么这亚子3 小时前
九、Go语言快速入门之map
运维·开发语言·后端·算法·云原生·golang·云计算
想进大厂的小王3 小时前
项目架构介绍以及Spring cloud、redis、mq 等组件的基本认识
redis·分布式·后端·spring cloud·微服务·架构
阿尔帕兹3 小时前
构建 HTTP 服务端与 Docker 镜像:从开发到测试
网络协议·http·docker