Files
test-repo/docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md
T

5.3 KiB
Raw Blame History

计算机网络:从输入网址到返回结果的过程

::: tip 🎯 核心问题 当你在浏览器输入 www.google.com 并按下回车,到底发生了什么?

这个看似简单的动作,背后隐藏着一个庞大精密的跨国“快递系统”。从填写订单(URL解析)到查询地址簿(DNS解析),从建立运输通道(TCP握手)到快递员送货(HTTP请求与响应),最终在你屏幕上拆开包裹组装(浏览器渲染)。本章带你零基础、完整理解这个神奇的过程。 :::


全景演示:网络世界的快递系统

你可以通过下方的交互组件,直观地体验从输入网址到看到网页的 5 个关键步骤。先自己点一点,然后再看底下的详细解释!


1. 填写购物单 (URL 解析)

当你在浏览器的地址栏中输入 https://www.google.com 这样一段地址并按下回车,这就像是你准备去商店买东西,首先要在购物单上写清楚:

  • 交通方式 (Protocol):例如 https://,代表你想坐安全级别的最高的“运钞车”(加密通信)去。如果是单纯的 http://,就相当于坐普通的“大巴”(明文传输),路上可能会被人偷看行李。
  • 店铺地址 (Host):例如 www.google.com,也就是你要去哪家店(域名)。
  • 商品位置 (Path):例如 /search,意思是进了商店之后,你要去哪个货架找什么东西(即请求的具体资源路径)。

浏览器第一步要做的,就是把这段“人类语言”拆解开,看看你到底想要什么。


2. 查找店铺地址 (DNS 解析)

网络世界的“快递员”(路由器设备)是不懂英文的,它们只认数字(也就是 IP 地址)。

它们需要知道对方的精确数字坐标!这就像快递员不知道“王府井百货”在哪,他必须先查地图,找到“北京市东城区王府井大街255号”这个确切的门牌号(比如 142.250.66.4)。

  • 本地缓存:浏览器会先翻翻自己的备忘录(看之前有没有访问过该网站)。
  • DNS 系统:如果在本地找不到,它就会向互联网的“查号台”(DNS 服务器)打电话询问:“请问 google.com 的数字地址是什么?”。一旦获得了对应的 IP 地址,浏览器的快递车就知道该往哪里开了。

3. 建立通话 (TCP 握手)

拿到了地址,浏览器不能直接冲过去,万一店今天没开门呢?所以,要先进行一次**“电话确认”(这叫建立 TCP 连接)。为了确保通话稳定可靠,会有三次非常严谨的“确认打招呼”机制,行业里叫三次握手 (Three-way Handshake)**

  • 第一次握手 (浏览器):“喂,你好,我要来买东西,你在吗?” (SYN)
  • 第二次握手 (服务器):“我在的,欢迎光临!你也听得到我说话吗?” (SYN-ACK)
  • 第三次握手 (浏览器):“我也听到了!那我就要过来了!” (ACK)

经过这三次确认,双方都知道了彼此的听力和表达能力都没问题,一条稳定可靠的通信通道就正式建立了。


4. 购买商品 (HTTP 请求与响应)

通道建好后,业务正式开始。

  • 浏览器(买家)提交订单:浏览器会打包一份极其规范的订单表格(HTTP 请求报文),里面写着:“老板,请给我拿一份你的主页 HTML 文件,我是用 Chrome 浏览器来访问的哦。”
  • 服务器(卖家)根据订单发货:位于地球另一端的 Google 服务器收到请求后,立刻开始在仓库里配货,生成网页的 HTML 代码,然后打包成包裹(HTTP 响应报文),发回给你的浏览器。包裹外面还会贴个标签“200 OK”,意思是“交易成功,你要的货全齐了”。

5. 拆盒组装 (浏览器渲染)

最后一步,货物送到了你的电脑。但发过来的只是一堆代码(HTML、CSS、JavaScript),这就好比你网购买了一箱乐高积木,还需要自己组装:

  1. 看说明书 (解析 HTML):浏览器先把 HTML 代码解读出来,拼装成网页的骨架(DOM 树)。
  2. 涂抹颜色 (解析 CSS):然后检查 CSS 代码,看看字体要多大、按钮是什么颜色,给网页穿上漂亮的外衣(CSSOM 树)。
  3. 计算布局并拼装 (Layout & Paint):浏览器计算好每个元素在屏幕上的确切位置,用画笔把它们画在你的显示器上。
  4. 注入灵魂 (执行 JavaScript):最后,各种能点击、能滑动的交互效果都通过 JavaScript 激活。

只要短短的几百毫秒,所有的步骤就已全部完成,你也就看到了那个熟悉的页面!


总结:从微观到宏观

如果我们把目光再拉远一点,整个网络通讯的本质,就是在做接力跑和翻译

  • 我们上面看到的这五步,大多是发生在你眼前的应用程序层面的事情。
  • 在肉眼看不见的底层,刚才那个充满代码的 HTML 包裹,会被切分成无数块极小的碎片(数据包)。这些碎片顺着你家墙上的网线、海底的万兆光缆,像接力棒一样在各种路由器之间传递。
  • 最终,这一切碎片完好无损地抵达,并在哪怕是几十个毫秒的时间里,化成你屏幕上的绚丽像素。

这就是计算机网络的神奇魅力!