前几天有个学妹问我为什么在浏览器里面输了网址就会显示出来页面，虽然这个现象很常见，但是要想解释清楚确实有些小困难，当时也只是简单的回答了她，现在想趁着这个机会好好整理下相关知识。整理完才觉得其实就和我们去一个地方找人是一个道理。所以说艺术源于生活却又高于生活，技术同样如此。

在回答这个问题前， 我们先来了解下我们平常说的那个网址到底是啥？

网址的学名叫做统一资源定位符（Uniform Resource Locator， 常缩写为URL）， 我们知道现在的互联网其实就是由众多资源所构成的一张巨大的网， 如何定位那些资源就是靠的 URL， 因此我们也可以把 URL 理解为是网络上资源的“门牌号“， 我们在浏览器中输入网址， 就相当于开一辆车（浏览器）去找一个地址（URL）

1. 缓存查找

如果你要出门找一个地方， 第一想法肯定是先想这个地方你有没有去过， 你要是去过的话那就不需要问人直接过去就好了。 我们的系统也是这么想的。 当你在浏览器中输入了 URL 之后， 浏览器会先查看 浏览器缓存 中有没有这个地址， 如果没有那就再去 系统缓存， 如果系统缓存还没有， 那就去路由器缓存找， 总之只要缓存中有， 就说明有这个资源， 那浏览器直接显示出来就好了。

Tips： 这里说下 hosts 文件 ， hosts 是一个没有扩展名的系统文件， 可以用记事本等工具打开， 其作用就是将一些常用的网址域名与其对应的 IP 地址建立一个关联“数据库”， 当用户在浏览器中输入一个需要登录的网址时， 系统会首先自动从 hosts 文件中寻找对应的 IP 地址，一旦找到， 系统会立即打开对应网页， 如果没有找到， 则系统会再将网址提交 DNS 域名解析服务器进行 IP 地址的解析。 需要注意的是， hosts 文件配置的映射是静态的， 如果网络上的计算机更改了请及时更新 IP 地址， 否则将不能访问。

2. DNS 解析

如果你认得去那个地址的路自然是最好， 那如果你根本就没去过那咋办？ 肯定会有人说导航， 但并不是所有的地方都是导航能搜到的， 这个时候我们自然而然就会想着去问路人了。 浏览器也是这样的， 如果在本地缓存中没有找到想要的资源， 那就只能去其他网络上的机器中寻找我想要的资源了。 那你怎么知道你要的资源在那台机器上？ 这时， DNS 就横空出世了。

DNS（Domain Name System， 域名系统），DNS 解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时， 例如 www.baidu.com， 其实这段 URL 并不是真正意义上的地址。 互联网上每一台计算机的唯一标识是它的 IP 地址（比如 127.0.0.1 就是我们本机的 IP 地址）， 但是 IP 地址并不方便记忆（毕竟都是很长的数字串）， 所以也就出现了网址（URL）这个玩意了， 目的就是为了方便普通用户去寻找网络上的其他计算机。 所以 DNS 实际上充当了一个翻译的角色， 将网址翻译成 IP 地址（就跟我想去南京大学， 问路的那个人告诉我南京大学在广州路上是一个道理）。

2.1 DNS 解析过程

DNS 解析其实是一个递归查询的过程：

在上述过程中， 首先在本地域名服务器中查询 IP 地址， 如果没有找到， 本地域名服务器会向根域名服务器发送一个请求， 如果根域名服务器也不存在该域名时， 本地域名会向 com 顶级域名服务器发送一个请求， 依次类推下去。 直到最后找到目标网址所对应的 IP， 并将其缓存到本地， 以供下次使用。

2.2 DNS 负载均衡

在讲 DNS 负载均衡前先来看张图片：

看到这可能就会有人犯嘀咕了， 我们不是 ping 的同一个网址吗， 为啥两次 IP 都不一样啊？ 其实原因很简单， 如果每次都一样是否说明你请求的资源都位于同一台机器上面， 那么这台机器需要多高的性能和储存才能满足亿万请求呢？ 其实真实的互联网世界背后存在成千上百台服务器， 大型的网站甚至更多。 但是在用户的眼中， 它需要的只是处理他的请求， 哪台机器处理请求并不重要。 DNS 可以返回一个合适的机器的 IP 给用户， 例如可以根据每台机器的负载量， 该机器离用户地理位置的距离等等， 这种过程就是 DNS 负载均衡， 又叫做 DNS 重定向。

再来举个例子， 如果你在新街口用地图搜南京大学， 返回给你的第一条数据可能就是南京大学鼓楼校区（因为距离最近）， 但如果你是在仙林用地图搜南京大学， 返回给你的第一条数据就有可能是南京大学仙林校区了。 DNS 负载均衡简单来说也是这个道理。

2.3 DNS 污染

DNS 污染（DNS cache pollution）， 又称域名服务器缓存投毒（DNS cache poisoning）， 是指一些刻意制造或无意中制造出来的域名服务器数据包， 把域名指往不正确的 IP 地址。

某些网络运营商为了某些目的， 对 DNS 进行了某些操作， 导致上网的用户无法通过域名取得正确的 IP 地址。 某些国家或地区出于某些目的为了防止某网站被访问， 而且其又掌握部分国际 DNS 根目录服务器或镜像， 也会利用此方法进行屏蔽。 （Google、 Facebook 等）

至于如果防止 DNS 污染， 这里只说一个方法就是修改 hosts 文件， 其他的自行搜索吧。

3. TCP 连接

其实在上面 DNS 解析的图中就已经有了 TCP 连接的过程了：

我们通过 DNS 解析获取到了网址所对应的 IP 地址后， 便需要发起 TCP 连接请求， 这里总共需要三次握手， 具体的过程就不赘述了， 可以查阅相关资料， 这里推荐刘欣老师的《TCP/IP 之 大明王朝邮差》， 以及大学计算机网络课本里面的 TCP 相关章节。

4. HTTP 请求

握手成功后， 浏览器就可以向服务器发送http请求了， 请求数据包。 发送 HTTP 请求的过程就是构建 HTTP 请求报文并通过 TCP 协议中发送到服务器指定端口(HTTP 协议 80/8080, HTTPS 协议 443)。HTTP 请求报文是由三部分组成: 请求行,请求报头和请求正文。

4.1 请求行

格式如下:

Method  RequestURL  HTTPVersion CRLF

例如：

GET index.html HTTP/1.1

常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。

4.2 请求报头

请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。

Tips：客户端不一定特指浏览器， 有时候也可使用 Linux 下的 CURL 命令以及 HTTP 客户端测试工具等。

常见的请求报头有: Accept, AcceptCharset, AcceptEncoding, AcceptLanguage, ContentType, Authorization, Cookie, UserAgent等。

上图是使用 Chrome 开发者工具截取的对百度的 HTTP 请求以及响应报文， 从图中可以看出， 请求报头中使用了Accept, AcceptEncoding, AcceptLanguage, CacheControl, Connection, Cookie等字段。 Accept 用于指定客户端用于接受哪些类型的信息， AcceptEncoding 与 Accept 类似， 它用于指定接受的编码方式。Connection 设置为 Keepalive 用于告诉客户端本次 HTTP 请求结束之后并不需要关闭 TCP 连接， 这样可以使下次 HTTP 请求使用相同的 TCP 通道， 节省 TCP 连接建立的时间。

5. 服务器响应

这部分对应的就是后端工程师眼中的 HTTP。 后端从在固定的端口接收到 TCP 报文开始， 这一部分对应于编程语言中的 socket。 它会对 TCP 连接进行处理， 对 HTTP 协议进行解析， 并按照报文格式进一步封装成 HTTP Request 对象， 供上层使用。 这一部分工作一般是由 Web 服务器去进行， 常用的 Web 服务器有 Tomcat, IIS 和 Netty 等等。

HTTP 响应报文也是由三部分组成: 状态码, 响应报头和响应报文。 篇幅原因这里就不详细展开了。

6. 浏览器解析网页信息

服务器返回给浏览器的文本信息， 通常是 HTML, CSS, JS, 图片等文件， 那么浏览器是如何对泽泻内容进行渲染呢？ 通常是下面五个步骤：

  1. 处理 HTML 标记并构建 DOM 树。
  2. 处理 CSS 标记并构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 根据渲染树来布局， 以计算每个节点的几何信息。
  5. 将各个节点绘制到屏幕上。

不过这五个步骤在不同内核的浏览器中执行细节是不同的， 想深入了解的可以查阅相关资料， 这里推荐一篇文章：《浏览器渲染页面过程与页面优化》

浏览器是一个边解析边渲染的过程。 首先浏览器解析 HTML 文件构建 DOM 树， 然后解析 CSS 文件构建渲染树， 等到渲染树构建完成后， 浏览器开始布局渲染树并将其绘制到屏幕上。

JS 的解析是由浏览器中的 JS 解析引擎完成的。 JS 是单线程运行， 也就是说， 在同一个时间内只能做一件事， 所有的任务都需要排队， 前一个任务结束， 后一个任务才能开始。 但是又存在某些任务比较耗时， 如 IO 读写等， 所以需要一种机制可以先执行排在后面的任务， 这就是： 同步任务(synchronous)和异步任务(asynchronous)。 JS 的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。 同步任务就是放在主线程上执行的任务， 异步任务是放在任务队列中的任务。 所有的同步任务在主线程上执行， 形成一个执行栈; 异步任务有了运行结果就会在任务队列中放置一个事件； 脚本运行时先依次运行执行栈， 然后会从任务队列里提取事件， 运行任务队列中的任务， 这个过程是不断重复的， 所以又叫做事件循环(Event loop)。 如下图所示：

7. 总结

当上述步骤执行完成后我们便可在浏览器中看到一个完整的页面了， 总结下其实就只有几步：

  1. 浏览器地址栏输入 url
  2. 浏览器会先查看浏览器缓存系统缓存路由缓存， 如有存在缓存， 就直接显示。 如果没有， 接着第 3 步
  3. 域名解析（DNS）获取相应的 IP
  4. 浏览器向服务器发起 tcp 连接， 与浏览器建立 tcp 三次握手
  5. 握手成功， 浏览器向服务器发送 http 请求， 请求数据包
  6. 服务器请求数据， 将数据返回到浏览器
  7. 浏览器接收响应， 读取页面内容， 解析 html 源码， 生成 Dom 树
  8. 解析 css 样式、 浏览器渲染， js 交互

其实简单来看这几个过程并不是很复杂， 但是每个步骤都可以深挖出一大堆的知识， 比如 DNS 的优化、页面渲染的优化、 HTTPS 等等非常多的东西， 这里考虑到篇幅以及科普效果很多东西都一笔带过了。