【前端】详解网页从请求到最终浏览器呈现（一）

网页从请求到最终浏览器呈现（一）

以请求 www.baidu.com 为例，从用户输入url到最后百度首页的呈现其实可分为八个步骤:

• 获取用户输入的url
• 域名解析获取ip地址
• 建立TCP连接
• 发送http请求
• 服务器响应并返回请求数据
• TCP关闭连接
• 浏览器页面渲染
• 浏览器请求获取超链接资源

一、获取用户输入的url

用户输入 www.baidu.com

二、域名解析获取ip地址

• 查找浏览器缓存
  浏览器在获取网站域名的实际IP地址后会对其IP进行缓存，减少网络请求的损耗。
  浏览器的缓存时间是由浏览器自己规定，不同的浏览器缓存DNS的浏览器时间不同，大约在2~30min间。
  Chrome的过期时间是1分钟，在这个期限内不会重新请求DNS。Chrome浏览器看本身的DNS缓存时间比较方便，在地址栏输入，即可查看浏览器缓存。

		chrome://net-internals/#dns

• 如果浏览器缓存中没有对应的映射关系，则去查找系统缓存。

• 如果系统缓存中没有对应的映射关系，则去查找路由缓存。
  一般来说路由器都会有自己的DNS缓存。

• 如果路由缓存中没有对应的映射关系，则去查找ISP缓存。
  ISP（电信运营商）缓存有些不靠谱，有些缓存服务器（不多）会忽略网站DNS提供的TTL，自己设置一个较长的TTL，导致顶级DNS更新时不能及时拿到新的IP地址。
  目前许多blog中DNS的缓存顺序为 ：浏览器缓存 - 本地缓存 - DNS服务器，
  但是本地缓存的概念说法不一。
  一部分说法为本地缓存是指系统缓存，也有部分说法认为本地缓存是指路由缓存。

读了一篇关于DNS缓存污染相关问题的不错的blog，大家有兴趣可以去了解一下。
DNS缓存污染.

---

• 如果缓存中不存在对应的映射关系，则去查找DNS服务器。
  查找DNS服务器有两种方式：

  • 递归查询(recursive query)
    主机向本地域名服务器的查询一般都是采用递归查询。
    如果主机所询问的本地域名服务器不知道被查询的域名的IP地址，那么本地域名服务器就以DNS客户的身份，向其根域名服务器继续发出查询请求报文(即替主机继续查询)，而不是让主机自己进行下一步查询。因此，递归查询返回的查询结果或者是所要查询的IP地址，或者是返回一个失败的响应，表示无法查询到所需的IP地址。
    

  举个栗子，有个帅气的小男生要给鱼酱递一封情书，但是小男生并不知道鱼酱位置。
  于是这个小男生找到了鱼酱的室友A，想通过室友A来知道鱼酱的位置，但是室友A也不知道，于是室友A就去问了同学B。
  但是同学B也不知道鱼酱在哪，于是同学B便直接跟老师C打了电话，询问鱼酱的位置。
  老师C自然知道鱼酱在哪里，于是老师C把鱼酱的位置告诉了同学B。
  同学B得知后把鱼酱的位置反馈给了室友A。
  室友A知道了鱼酱在哪后就把鱼酱的位置告诉了小男生。
  就这样小男生得到了鱼酱的位置。
  这就是递归查询

  • 迭代查询(iterativequery)
    本地域名服务器向根域名服务器的查询通常是采用迭代查询。
    当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的IP地址，要么告诉本地域名服务器:“你下一步应当向哪一个域名 服务器进行查询”。然后让本地域名服务器进行后续的查询(而不是替本地域名服务器进行后续的查询)。
    

  再举个例子，又有一个帅气的小男生要给鱼酱递情书，但是这个小男生也不知道鱼酱位置。(鱼酱神出鬼没)
  于是这个小男生也找到了鱼酱的室友A，想通过室友A来知道鱼酱的位置，但是室友A也不知道，于是室友A就去问了同学B。
  然后同学B具体也不清楚鱼酱在哪，但同学B知道老师C知道鱼酱的位置，于是同学B告诉室友A了老师C的地址，让他去问老师C鱼酱在哪里。
  然后室友A又去问老师C鱼酱的位置，，老师C虽然很奇怪为什么总来他这里问鱼酱的位置，但还是告诉了室友A：男友D一定会知道鱼酱在哪里的，所以我把D的位置告诉你吧！
  于是室友A找到了男友D，问鱼酱到底在哪里，男友D本着友好原则告诉了室友A鱼酱的位置。
  室友A知道了鱼酱在哪后就把鱼酱的位置告诉了小男生。
  就这样小男生得到了鱼酱的位置。
  这就是迭代查询

  当然，本地域名服务器也可以采用递归查询，这取决于最初的查询请求报文的设置是要求使用哪一种查询方式。

  ---

  了解了DNS服务器的查询方式之后，我们来正式了解一下DNS服务器的查找过程。
  

  现在我们把图中的 m.xyz.com 看作为我们自己的域名，
  y.abc.com 看作为 www.baidu.com。
  现在我们需要得到 www.baidu.com 的 IP 地址。
  以图（a）为例：

  • ① 当我们的客户端发起www.baidu.com的请求时，首先会在本地域名服务器递归查找对映的映射关系。
    （对应刚刚在递归查询中的栗子，客户端就是小男生，室友A就是本地域名服务器啦）
  • ② 接下来本地域名服务器会以迭代查询的方式向一个根域名服务器请求 www.baidu.com 。
    （这里的根域名服务器就对应着同学B）
  • ③ 根域名服务器告诉本地域名服务器，下一次应查询的顶级域名服务器 com 域的IP地址。
    （这里的顶级域名服务器就相当迭代查询中的老师C，室友A去问同学B，于是同学B吧老师C的地址告诉了室友A）
  • ④ 本地域名服务器以迭代查询的方式向顶级域名服务器 com 域发起请求。
  • ⑤ 顶级域名服务器 com 域告诉本地域名服务器，下一次应查询的权限域名服务器 baidu.com 的IP地址
    （权限域名服务器相当于男友D）
  • ⑥ 本地域名服务器以迭代查询的方式向权限域名服务器 baidu.com 发起请求。
  • ⑦ 权限域名服务器 baidu.com 把 www.baidu.com 的IP地址返回给本地域名服务器。
    （此时室友A已经得知了鱼酱的位置）
  • ⑧ 本地域名服务器把获得的 www.baidu.com 的IP地址 告诉主机。
    （到这一步，小男生才得到了鱼酱的位置）

  ---

  在图（b）中，可以看到本地域名服务器采用递归查询的方式。在这种情况下，本地域名服务器只需向根域名服务器查询一次，后面的几次查询都是在其他几个域名服务器之间进行的(步骤③至⑥)。只是在步骤⑦，本地域名服务器从根域名服务器得到了所需的IP地址。最后在步骤⑧，本地域名服务器把查询结果告诉主机。

  在DNS查找过程中，使用的为UDP数据报，且无论采用递归查询或是迭代查询，都有8个UDP数据报。
  因为在DNS查找的过程中，一般返回内容都不会超过512字节，用UDP传输即可。且UDP传输时不需要TCP的三次握手，这样DNS服务器负载更低，响应更快。
  理论上说，客户端也可以指定向DNS服务器查询时用TCP，但事实上，很多DNS服务器进行配置的时候，仅支持UDP查询包。

未完待续