互联网大白话 · 第三模块

DNS 找到地址后,网页怎么来到眼前?

拿到 IP 只是找到了大楼。浏览器还要找到入口、建立连接、确认身份、请求内容,最后把收到的材料拼成页面。

← 先看 DNS 如何找到地址

先看全程

六站之后,一张网页出现

每一站解决一个不同的问题。

  1. 01IP

    大楼在哪

  2. 02端口

    从哪个入口进

  3. 03TCP

    先把线路接通

  4. 04TLS

    确认身份并加密

  5. 05HTTP

    一问一答拿内容

  6. 06浏览器

    把材料拼成页面

找到楼,还要找门

IP 指向设备,端口指向具体服务。

同一台设备可以同时提供网页、邮件等多种服务。端口像不同入口,让到达设备的数据知道应该交给谁。

80
HTTP 常用入口内容通常不加密,很多网站会把访问引导到 HTTPS。
443
HTTPS 常用入口浏览器通常从这里开始安全的网页连接。

第三站 · TCP

先确认线路接通,再有序传送内容。

浏览器“能听见吗?”
网站服务“能,准备好了。”
浏览器“开始传吧。”

TCP 的重点不是背这些招呼,而是理解:双方先建立一条可靠通道,尽量保证数据完整、按顺序到达;如果途中丢失,会尝试补发。

第四站 · TLS

HTTPS 多做两件事:确认身份,加密路途。

TLS 会检查网站出示的证书是否适用于当前域名,并协商加密方式。之后传输的网页内容不容易被沿途直接看懂或悄悄改动。

01
证书对得上吗?确认你连接的服务有权代表这个域名。
02
加密方式定好了吗?双方约定接下来如何安全地传输数据。

第五站 · HTTP

浏览器提出请求,网站给出响应。

可以把它理解成一张点单和一张回执。

浏览器 → 网站

请求:请给我首页

GET / HTTP/1.1
Host: example.com

GET 表示读取内容,/ 表示网站首页。浏览器还会附带自己支持的格式等信息。

网站 → 浏览器

响应:收到,这是内容

200 OK
Content-Type: text/html

200 表示请求成功;text/html 告诉浏览器,这份内容应该按网页结构读取。

常见状态码,是网站回答的“结果标签”

200成功

内容正常返回。

301 / 302换地址

请改去另一个网址。

404没找到

服务在,但这个页面不存在。

500服务出错

网站处理请求时出了问题。

第六站 · 浏览器

收到材料,不等于页面已经完成。

浏览器先读 HTML,再按线索继续请求样式、图片和脚本,最后计算布局并绘制到屏幕。你看到的网页,是多份材料协作的结果。

HTML搭结构

标题、段落、按钮放在哪里。

CSS定样式

颜色、字号、间距如何呈现。

JS做交互

点击之后,页面如何回应。

浏览器绘制网页来到眼前