持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

写在前面

从网景浏览器问世的远古时期，到如今互联网成为基石的新时代，逐渐地，我们的生活可以说已经被互联网完全渗透，在网络上的时间，已经几乎占据我们生活绝大部分的时间，无论是通讯、点外卖、逛某宝、看视频、听音乐等等等，互联网已俨然变成我们每个人习以为常的东西，可作为程序员，我们最大的特点就是喜欢刨根问底，当看到在浏览器输入 URL 后便成功跳转到某页面时，这个时候你是不是也想在朋友面前转上一把“懂爷”，给他们好好科普一下子呢，那么今天我们就来好好盘一盘 “从输入 URL 到页面显示到底经历了什么”！

一、网络请求

1、DNS

首先，当我们输入了一个 URL 之后并开始搜素，浏览器首先需要知道该 URL 对应的公网 IP 是多少，只有获得了公网 IP ，才能够连接到对应的主机。那么 URL 如何转换成公网 IP 呢？答案是 DNS 服务器，全世界具有若干台 DNS 根服务器，其余服务器通过与之通过若干层相关联形成 DNS 服务器梯队，当客户端拿到 DNS 后首先检查是否存在 DNS 缓存，若没有缓存，则将 URL 发送到指定的 DNS 服务器上查找，若未找到，则继续向上查找，最后返回相对应的 IP 解析成功。具体流程如下图批注 2022-06-21 224056.png

2、HTTP 请求

当通过 DNS 获取到了相关的地址后，下一步就是通过 HTTP 请求获取内容了。由于 HTTP 也存在缓存机制，因此当获得通讯地址后，执行 HTTP 请求的第一步，依然是检查缓存，当缓存命中时，则使用缓存中内容。当然，除了请求网页，网页引入的静态资源的附加请求也是同样的道理，这里略过。

HTTP 缓存分为强制缓存和协商缓存，强制缓存为服务器直接在响应头中设置了固定的缓存有效时间，当处于有效时间内，则直接读取本地缓存，不发送 HTTP 请求，而协商缓存则不同，协商缓存不指定有效时间，而是在每次请求时想向服务器发送资源标识，服务器识别资源是否需要更新，若无需更新直接返回304，客户端读取本地缓存，若需要更新，返回200并返回最新资源，客户端获取最新资源并存储到缓存中，过程如下图所示

批注 2022-06-21 230511.png

批注 2022-06-21 230529.png

二、解析

当成功发送 HTTP 请求后，客户端就能够获取到 HTML 的源码了，而我们都知道网页源码其实是一堆乱码数据，对于我们来说其实是毫无意义的，所以就需要浏览器进行处理，将其还原成我们能够接受的样子。那么浏览器时如何处理的呢？这个过程有一个比较恰当的词————数据结构化。

当我们获得了一个毫无意义的 HTML 源码组成的字符串后，浏览器需要将其整理成能够渲染的格式，这个过程就是 “字符串 ————> 结构化数据” 的过程，这个过程包括3个过程，第一个是利用 HTML 构建 DOM 树，第二个是利用 CSS 构建 CSSOM 树，第三个是将 DOM 树和 CSSOM 树结合，形成 RenderTree。渲染详细步骤如下图所示。

三、渲染

当渲染树生成后，接下来就到了最后一步了，进行网页渲染，页面渲染主要工作是计算各个 DOM 的定位、尺寸等排版相关参数，最后绘制页面，需要注意的是，渲染过程中，可能会遇到 JS 相关的代码，而 DOM 渲染和 JS 共用一个线程，因此 JS 执行可能会阻塞 DOM 渲染，还有一个较为特殊的情况时若存在异步加载的 CSS、图片等资源，可能会触发页面重新渲染。至此，页面完整呈现在我们眼前！！！