从地址栏到像素：浏览器如何加载网页
一篇适合初学者的指南，讲解DNS查询、HTTP请求与响应，以及浏览器如何将HTML、CSS和JavaScript转换为屏幕上显示的页面。
来源: The Invisible Journey: What Really Happens When You Open a Website?
输入 example.com 并按下回车键似乎瞬间就能看到结果，但实际上在内容显示在屏幕上之前要经历多个步骤。对于刚开始学习网页开发的人来说，DNS、服务器、HTML、CSS 和 JavaScript 这些术语可能看起来像是相互独立的主题。本文将它们串联成一个完整的流程，让你能够构建一个思维框架，后续学习的 API、渲染性能等内容都可以以此为基础。
整个过程分为四个阶段：找到网站地址、向网站请求内容、接收这些内容，以及将其转换为可见的页面。
第一阶段：找到网站的所在位置
人们通常通过名称来识别网站。这样的名称很容易记住：
example.com
google.com
youtube.com
然而，网络中的计算机是通过IP地址来互相识别的，这类数字标识符包括IPv4的203.0.113.10，以及IPv6的更长十六进制格式。在浏览器能够访问某个网站之前，必须先将该网站的名称转换为地址，而这正是DNS——域名系统的作用。
理解DNS的一个好方法可以类比手机中的联系人列表：你通过姓名存储和查找联系人，手机会帮你查询对应的电话号码，无需记住这些数字。DNS在网络中的作用也是如此：你输入域名，DNS就会提供托管该域名的服务器地址。
在实际应用中，域名查询是分层次进行的，并且会进行大量缓存。浏览器首先检查自身的缓存，然后是操作系统的缓存，只有在这之后才会向DNS解析器请求帮助，这类解析器通常由您的互联网服务提供商或公共DNS服务提供。如果解析器尚未掌握答案，它会逐级查询DNS层级结构，直到找到负责该域名的服务器。由于有缓存机制，您最近访问过的网站通常能几乎立即被解析出来。
第二阶段：发送请求
拿到IP地址后，浏览器就可以联系该网站的服务器：这是一台专门用于存储、生成并传输网站所需文件和数据的计算机。
在任何网页内容被传输之前，浏览器会先与该服务器建立连接。对于现代的 https:// 网站，这一过程还涉及 TLS 握手，双方在此过程中确定加密密钥，同时浏览器会验证服务器的证书，以确保自己正在与真正的网站通信。只有完成这些步骤后，浏览器才会发送HTTP 请求。
该请求在传输过程中会经过许多网络和设备，比如你的路由器、服务提供商的设备及各类中间路由器，最终才能到达服务器。从本质上讲，这个请求的含义是：“请将我显示此页面所需的内容发送给我。”此外，它还包含诸如请求的具体路径、浏览器支持的格式以及该网站的相关 Cookie 等信息。
第三阶段：接收响应
服务器处理请求后会以HTTP响应的形式予以回复。最初的响应通常是一份HTML文档，该文档会引用浏览器随后需要获取的其他资源，包括：
- HTML文档
- CSS样式表
- JavaScript文件
- 图片
- 其他数据，如字体或来自API的JSON数据
有一家餐厅用这样的方式来便于理解这一过程：
- 浏览器相当于顾客。
- 请求相当于点餐。
- 服务器相当于厨房。
- 响应相当于做好的饭菜。
你下订单后，厨房会读取订单、准备菜品并将其送出。网页的运作方式也是如此：浏览器发起请求，服务器处理请求，然后返回结果。每个响应还会包含状态码，比如表示成功的200或页面不存在时的404，这些状态码会告诉浏览器如何处理所接收的内容。
第4阶段：将文件转换为页面
仅有文件并不足以显示页面。浏览器仍需对这些文件进行解析并将它们组合成最终呈现的内容，而三种核心网页语言各自承担着不同的功能。
HTML负责提供结构
HTML用于描述页面上的内容及其组织结构：标题、段落、按钮、图片、链接等等。它相当于页面的骨架。浏览器会将其解析为DOM（文档对象模型），即由各种元素构成的树结构，后续的所有操作都基于此结构进行。
CSS负责控制外观
CSS决定了该结构的外观表现：颜色、字体、间距、布局以及尺寸等。如果说HTML是骨架，那么CSS就是赋予其视觉形态的所有元素。浏览器会将样式表解析为独立的结构，并将每条规则对应到需要应用的元素上。
JavaScript增添交互功能
JavaScript让页面具备交互性：能够响应按钮点击、播放动画、在无需完全重新加载的情况下加载和更新内容，还有更多功能。脚本可以读取并修改DOM及样式，这也是页面在首次显示后还能发生变化的原因。
整合应用
通过结构与样式的结合，浏览器会计算每个元素的位置（布局），然后绘制出最终结果（渲染）。默认情况下，普通的<script>标签会在脚本下载并执行期间暂停HTML解析，这也是性能建议中常常推荐使用defer或async属性的原因之一。
完整的流程顺序
各阶段的依次进行：
- 输入网站地址。
- DNS将域名转换为IP地址。
- 浏览器连接到服务器并发送请求。
- 服务器接收并处理该请求。
- 服务器返回响应。
- 浏览器接收HTML，并请求其中引用的CSS、JavaScript、图片及其他数据。
- 浏览器解析并整合这些资源。
在高速网络连接下，这些操作大多会在几分之一秒内完成，因此会给人一种按下回车键页面就立刻出现的错觉。
为何值得拥有这种模型
了解这一流程能将通常被分开教授的概念——浏览器、DNS、服务器、HTML、CSS和JavaScript——联系起来。它还能为您提供一个整合新知识的地方。日后当您学习API时，会将其视为更多的请求与响应交互；研究后端工作时，会明白它属于第三阶段的服务器端操作；探讨前端性能时，则会知道其核心在于加快第三阶段和第四阶段的处理速度。
这也有助于调试。出现“站点未找到”错误属于第一阶段问题，超时或连接错误属于第二阶段，500状态码则对应第三阶段的服务器问题，而页面虽能加载但显示异常则是第四阶段的CSS或JavaScript问题。
核心要点
- DNS将易于识别的名称映射为IP地址，并在多个层级进行缓存。
- 浏览器建立连接，通过TLS实现HTTPS加密，然后发送HTTP请求。
- 服务器返回HTML内容，其中又会引用CSS、JavaScript、图片及其他资源。
- HTML构成页面的结构，CSS负责样式设计，JavaScript则在浏览器布局和渲染页面之前添加交互功能。
- 每个阶段都有其独特的故障表现，这一模型因此既可作为实用的调试工具，也有助于学习。