从DNS缓存到三次握手：前端必懂的网络底层逻辑（附实用技巧）
作为前端开发者，我们每天都在和网络打交道——输入域名、点击访问、加载页面，这一系列流畅的操作背后，藏着DNS解析、协议传输、连接建立等一系列底层逻辑。很多时候我们只关注业务实现，却忽略了这些“基础操作”的原理，今天就结合日常笔记，拆解从DNS解析到三次握手的核心知识点，全程干货，新手也能看懂～
一、DNS深入解析：域名如何找到“服务器老家”？
我们输入的douyin.com、baidu.com这类域名，本质上是“服务器IP的别名”，因为IP地址（如127.0.0.1）难记，DNS就相当于“网络世界的通讯录”，负责将域名翻译成IP地址，让浏览器能找到对应的服务器。而这个解析过程，会优先从“近处”的缓存开始，越快越好。
1. 浏览器DNS缓存：最快的“本地通讯录”
浏览器会优先读取自身的DNS缓存，这是解析速度最快的一步——如果之前访问过某个域名，浏览器会把解析后的IP地址存起来，下次再访问，直接读取缓存，不用再走后续复杂流程。
✅ 实用技巧：Chrome浏览器可以通过 chrome://net-internals/#dns 查看、清除浏览器DNS缓存，遇到域名解析异常时，清除缓存往往能解决问题。
这里补充一个细节：浏览器解析后返回的IP地址，其实是一个IP数组，对应着分布式服务器集群——毕竟像抖音、百度这样的大平台，不可能只有一台服务器提供服务。
2. 分布式服务器集群：不止一台“服务器”在工作
我们通过DNS解析得到的IP地址，大多不是最终提供内容的服务器IP，而是Nginx代理服务器IP。可以用一个很形象的比喻理解：代理服务器就像“媒婆”，我们（浏览器）只需要找到“媒婆”，“媒婆”再根据实际情况，把我们的请求转发给背后成百上千台真实的服务器。
这背后的核心逻辑就是负载均衡：代理服务器会通过“轮询”等方式，将用户请求分配给不同的后端服务器，避免某一台服务器压力过大。比如我们每次刷新抖音，可能被分配到不同的服务器，但因为代理服务器的存在，我们完全感知不到差异。
3. 地域特性：离你越近，访问越快
分布式服务器集群还有一个关键特点——地域化部署。DNS解析时，会优先分配离你最近的机房的服务器集群IP，比如你在上海，就会优先连接上海的机房，而不是北京、广州的，这也是为什么不同地区访问同一网站，速度会有差异的核心原因之一。
二、本地操作系统DNS缓存：比浏览器更底层的“备份”
如果浏览器缓存中没有找到对应的IP地址，就会去读取本地操作系统的DNS缓存。而操作系统中，有一个非常有用的配置文件——hosts文件，它直接管理着本地“域名-IP”的指向关系，优先级甚至高于DNS服务器解析。
1. hosts文件的作用：本地测试的“神器”
对于开发者来说，hosts文件最常用的场景就是本地测试。比如抖音的开发者，本地电脑上有抖音官网的代码，想模拟“用域名访问本地代码”的效果，就可以修改hosts文件，将douyin.com指向本地IP（127.0.0.1）。
举个例子：在hosts文件中添加一行 127.0.0.1 douyin.com，保存后，在浏览器输入douyin.com，就会直接访问本地电脑上的抖音代码，而不是线上的官网——这在开发中非常实用，能避免线上、本地环境混淆，还能测试cookie、token等依赖域名的功能。
2. 如何修改hosts文件？（Windows系统）
hosts文件路径：C:\Windows\System32\drivers\etc\hosts
修改步骤：
- 按下
win+R，输入notepad，以管理员权限打开记事本（否则无法保存修改）； - 在记事本中打开上述路径的hosts文件；
- 添加或修改“IP 域名”的对应关系，保存即可生效（无需重启电脑）。
3. 特殊域名：无需解析，直接访问
像localhost这样的特殊域名，不需要经过DNS解析，它默认指向本地IP（127.0.0.1）。类似的，我们也可以手动将www.baidu.com指向127.0.0.1，这样访问百度时，就会直接指向本地。
三、HTTP响应与传输：200状态码背后的故事
当DNS解析完成，浏览器拿到服务器IP后，就会向服务器发送HTTP请求，服务器返回的200状态码，表示“请求成功”，同时会携带Content-Type: text/html（表示返回的是HTML文档），之后就开始下载页面内容——而这一切的前提，是先建立传输通道，也就是我们常说的三次握手。
在讲三次握手之前，我们先简单梳理下OSI七层协议，因为HTTP传输依赖于底层的多层协议支持。
1. OSI七层协议：网络传输的“分层协作”
OSI七层协议从下到上，依次是物理层、数据链路层、网络层、传输层、会话层、表示层、应用层，每层负责不同的功能，协同完成数据传输。对于前端开发者来说，重点关注以下4层即可：
- 物理层：最底层，负责将数据转换成0和1的电信号，通过网线、光纤等物理介质传输；
- 数据链路层：给数据加上MAC地址（上网设备的唯一ID），确保数据能在同一个局域网内找到目标设备；
- 网络层：给数据加上IP地址，结合MAC地址，实现跨局域网的传输（比如从家里的电脑连接到抖音的服务器）；
- 传输层：制定数据传输的规则，主要有两种协议——UDP和TCP，HTTP请求默认使用TCP协议。
2. UDP与TCP：两种不同的传输方式
传输层的两种核心协议，各有特点，适用不同场景：
- UDP协议：又称“数据报协议”，特点是快、高效，不需要建立连接，直接发送数据。适合视频、音频等对实时性要求高，但对数据完整性要求不高的场景（比如直播、语音通话）——即使偶尔丢失几个数据包，也不会影响整体体验。
- TCP协议：与UDP相反，特点是可靠、有序，但速度相对较慢。因为TCP会给每个数据包分配序号，传输过程中如果有数据包丢失，会重新发送；接收方会按照序号拼接数据包，确保数据完整有序。HTTP请求、文件下载等场景，都需要TCP协议的支持。
补充：一个大文件（比如一张图片、一个视频），会被分成多个数据包，通过不同通道并发传输，最后在接收方按序号拼接——这也是为什么有时候下载文件会“卡顿”，本质上是部分数据包丢失，需要重新传输。
而TCP协议的完整传输，第一步就是建立连接，也就是「三次握手」。
3. 三次握手：建立TCP连接的“三步约定”
三次握手的核心目的，是让客户端（浏览器）和服务器确认“双方都能正常接收和发送数据”，避免出现“一方能发、一方收不到”的情况。用通俗的语言拆解，就是以下三步：
- 客户端 → 服务器：“我要连接你，准备好接收数据了吗？”（发送SYN报文）；
- 服务器 → 客户端：“我准备好了，你也准备好发送数据吧！”（发送SYN+ACK报文，确认接收，同时请求客户端准备）；
- 客户端 → 服务器：“我也准备好了，开始传输数据吧！”（发送ACK报文，确认准备完成）。
三次握手完成后，TCP连接正式建立，接下来就可以开始传输HTTP数据（HTML、CSS、JS等），直到页面加载完成，之后会通过“四次挥手”断开连接。
四、总结：前端视角下的网络流程梳理
结合上面的知识点，我们可以梳理出“输入域名→加载页面”的完整流程，帮你快速串联所有知识点：
- 输入域名（如douyin.com），浏览器先查自身DNS缓存，有则直接获取IP；
- 无浏览器缓存，查本地操作系统DNS缓存（及hosts文件），有则获取IP；
- 无本地缓存，DNS服务器解析域名，返回分布式服务器集群的Nginx代理IP（优先就近机房）；
- 浏览器通过TCP三次握手，与代理服务器建立传输通道；
- 浏览器发送HTTP请求，代理服务器通过负载均衡，将请求转发给后端真实服务器；
- 服务器返回200状态码及HTML内容，通过TCP协议传输回浏览器；
- 浏览器解析HTML、CSS、JS，渲染页面，完成加载。
以上就是DNS解析、本地hosts配置、OSI协议、三次握手的核心知识点，都是前端开发者日常工作中可能用到的底层逻辑——理解这些，不仅能帮你解决“域名解析异常”“本地测试失败”等问题，也能让你对网络传输有更清晰的认知。
如果觉得有帮助，欢迎点赞收藏～ 也可以在评论区交流你遇到的网络相关问题，一起查漏补缺！
