如何向学妹解释在地址栏中输入网址后发生了什么？

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

在回答这个问题前， 咱们先来了解下咱们日常说的那个网址究竟是啥？

网址的学名叫作统一资源定位符（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等等很是多的东西， 这里考虑到篇幅以及科普效果不少东西都一笔带过了，想深刻了解的能够在微信公众号 「01二进制」 后台回复 “计算机网络书籍” 获取相关专业书籍进行阅读。