从浏览器输入URL到页面渲染这个过程发生了什么?
整场30分钟的一面,没有任何编码、代码题,只有这一道看似老套的问题,其实具体说是所有问题都是由这一道题引出的。
“这道题,深入一下就能很好的分辨出候选人知识体系的完整性。” 面试官如是说。
Q:从浏览器输入URL到页面渲染这个过程发生了什么?
URL解析
浏览器接收到URL后会先进行解析,将URL拆分为具体含义的字段
Q:具体含义的字段都是什么?
- Protocol:协议头,表明浏览器如果处理要打开的文件。如HTTP,FTP
- Host:主机域名/IP地址,访问资源在互联网上的地址,主机域名经过DNS解析成IP地址
- Port:端口号
- Path:目录路径,请求的目录或文件名
- Query:查询参数,请求传递的参数
- Fragment:片段/锚点,常用作前端路由
DNS解析
URL解析后,以参数的形式传入网络请求线程将Host字段转换为IP地址然后进行DNS解析,根据DNS系统查找服务器IP,首先查询浏览器自身的DNS缓存,如果未查到,继续查找系统自身的DNS缓存,如果还未查到,继续从系统hosts文件中查找,如果在本地主机没找到,就会本地域名服务器查找,如果依旧没找到就会依次去根域名服务器,COM顶级域名服务器和权限域名服务器等迭代查询,最终将找到IP返回给本地主机,如果查询不到则报错。
Q:进程和线程的区别?
进程是一个程序运行的实例,操作系统会为进行开辟单独的内存存放运行所需的代码和数据。每一个进程至少有一个主线程及若干子线程,多个线程可以共享同一进程所分配的资源,多线程可以明显提高运行效率。
- 只要某个线程出错,会导致整个进行崩溃
- 进程之间相互独立,一个进程崩溃不会影响其他进程,每个进程只能访问系统分配给自己的资源,但可以通过IPC机制通信
- 线程之间可以共享所属进程的数据
- 进程所占用的资源会在关闭后由操作系统回收,即使进程中某个线程存在内存泄漏
建立HTTP连接
通过DNS解析后获取到目标服务器IP,浏览器与服务器进行TCP三次握手建立连接,如果是HTTPS的话还需要建立TSL连接以及协商加密算法。
Q:讲一下TCP模型及TCP连接。
TCP/IP模型借鉴了OSI模型,OSI模型分为7层
- 应用层:负责给应用程序提供接口,使其可以使用网络服务,HTTP协议位于该层
- 表示层:负责数据的编码-解码,加密-解密,压缩-解压缩。
- 会话层:负责系统之间通信
- 传输层:负责端到端连接的建立,使报文能在端到端之间传递。TCP/IP位于该层。
- 网络层:为网络设备提供逻辑地址,使位于不同地址位置的主机之间拥有可访问的连接和路径
- 数据链路层:在不可靠的物理链路上提供可靠的数据传输服务。
- 物理层:定义物理设备的标准,如网线或光纤的接口模型
TCP/IP模型将应用层、表示层、会话层合并为应用层。根据网络模型,当本地设备接入网络后,数据链路层和网络层就接通了,通过传输层建立端到端的连接就可以发送HTTP请求。传输层常见的协议由TCP协议和UDP协议。HTTP采用TCP协议保证数据传输的可靠性。
由于TCP是面向连接的协议,所以在数据传输之前需要建立客户端与服务端的连接并且明确双发的接受、发送能力都是正常的,也就是三次握手和四次挥手
Q:那继续说下三次握手和四次挥手吧。
三次握手:
- 第一次握手:客户端发送SYN给客户端,客户端进入等待服务端确认的状态
- 第二次握手:服务端准备好连接,针对客户端的SYN给一个ACK响应,并发送一个SYN给客户端
- 第三次握手:客户端准备就绪,给服务端发送一个ACK响应。 当请求完成后TCP连接进行四次挥手
- 客户端发送FIN告诉服务端数据已经全部发送完成,进入FIN_WAIT状态
- 服务端收到FIN后,给客户端发送ACK,告知客户端自己收到了关闭信息,进入CLOSE_WAIT状态
- 服务端发送FIN告诉客户端数据已全部发送完成,进入LAST_ACK状态
- 客户端收到FIN后进入TIME_WAIT状态,发送ACK给服务端,服务端进入CLOSED状态。
Q:为什么握手是三次,而挥手是四次?
三次握手可以确认双发的收发功能都正常,多一次没必要。之所以需要四次挥手也是为了确认双发的数据都已经发送完成,保证连接可靠的断开,四次挥手不能像三次挥手一样服务端把ACK和SYN合并在一起返回给客户端,因为当收到客户端的断开请求时,服务端可能有自己的事情处理,但是又要告知客户端自己已经收到断开请求了,所以需要分两次发送。
Q:如果已经建立了TCP连接,但客户端突然出现故障怎么办?
TCP设有保活计时器,通常为两个小时,服务端每次收到客户端的请求后重新计时,当超出2个小时后服务器便会每隔75秒发送一个探测报文段,如果连续10个探测报文段都没反应则判断客户端故障,服务端断开连接
获取并解析内容
连接建立之后浏览器开始发送请求获取内容,首先解析HTML和CSS文件,构建DOM文档对象模型和CSSOM层叠样式表模型,当DOM树和CSSOM树构建完成之后,浏览器会把DOM树和CSSOM树构合并为渲染树。浏览器会先进行样式计算,为DOM树上的结点找到对应的样式,样式计算后开始构建布局树,为DOM树上的节点找到对应位置以及display:none的隐藏,布局树完成后开始建立分层树,主要是为了满足滚动条,z-index,position这种复杂的分层操作,最后渲染进程将每个节点的具体绘制方式转化为屏幕上的实际像素,将整个页面中展示出来,渲染过程会出现回流和重绘
Q:说下回流和重绘
- 重绘指的是不影响布局的操作,比如更改颜色,重绘只需要重复的计算样式就可以直接渲染,对浏览器渲染影响较小
- 回流(重排)指的是影响布局的操作,比如改变宽高、隐藏节点等,因为改变了布局,所以需要重新进行样式计算、布局树重新生成、分层树重新生成,所以重排影响较大。每个页面至少进行一次重排,即页面首次加载