前端面试八股文之一：url输入到页面渲染完毕的过程

感觉这题还挺容易考到的，属于八股文里的一股，而且在回答过程中还会触及到其他几个面试题。。

1. DNS解析

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如http://www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。
当然如果你直接输入的是另一台电脑的IP地址来访问它，那么则不存在这一步。

考点：DNS是如何查询的

答：

1) 浏览器首先搜索浏览器自身缓存的DNS记录。

2) 如果浏览器缓存中没有找到需要的记录或记录已经过期，则搜索hosts文件和操作系统缓存。

3) 如果在hosts文件和操作系统缓存中没有找到需要的记录或记录已经过期，则向域名解析服务器发送解析请求。

4) 如果域名解析服务器也没有该域名的记录，则开始递归+迭代解析。

5) 获取域名对应的IP后，一步步向上返回，直到返回给浏览器。

2. TCP连接

知道了服务器的 IP 地址，下面便开始与服务器建立连接了。

考点：TCP三次握手

答：

主机向服务器发送一个建立连接的请求（您好，我想认识您）；
服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。（三次握手的过程采用 TCP 协议，其可以保证信息传输的可靠性，三次握手过程中，若一方收不到确认信号，协议会要求重新发送信号）

图：

引发的考点：为什么是三次握手？

答：“已失效的连接请求报文段”的产生在这样一种情况下：client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况，client不会向server的确认发出确认。server由于收不到确认，就知道client并没有要求建立连接。” -- 谢希仁版《计算机网络》。

3. 发起HTTP请求

当服务器与主机建立了连接之后，下面主机便与服务器进行通信。网页请求是一个单向请求的过程，即是一个主机向服务器请求数据，服务器返回相应的数据的过程。
浏览器根据 URL 内容生成 HTTP 请求，HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文；

这一块的考点过多，比如强缓存和协商缓存等。

4. 服务器处理请求并返回HTTP报文

服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
服务器将得到的 HTML 文件发送给浏览器；
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文

考点：HTTP状态码

答：

1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。

5. 浏览器解析渲染页面

在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML ；

这一部分都是考点：浏览器加载页面渲染流程，大致如下

1. 解析HTML文件生成DOM Tree

2. 解析CSS文件生成CSSOM（CSS对象模型）

3. 整合DOM Tree和CSSOM，生成Render Tree

4. layout布局（重排在这一步，确定大小位置等，可以想象成将页面切成一块一块的）

5. 渲染每一个节点（重绘在这一步，这也是为什么重排一定重绘，重绘不一定重排）

6. 结束连接

主机向服务器发送一个断开连接的请求（不早了，我该走了）；
服务器接到请求后发送确认收到请求的信号（知道了）；
服务器向主机发送断开通知（我也该走了）；
主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接；

考点：TCP四次挥手

图：

文章大部分内容整理来至知乎大佬“高程”：

《前端面试题---一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？》

链接：https://zhuanlan.zhihu.com/p/53351608