浏览器输入URL后发生了什么

相信大多数的前端小伙伴对这个问题并不陌生，在面试中或多或少都遇到过这个问题，不知道当时你们回答的怎么样。最近利用春节放假时间又复习了一下这个知识点，在此总结一下，一是加深印象，二是方便以后自己面试的时候看。

整个过程大体分为六步。

一、URL解析

用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址。如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，对一些默认的东西进行补齐，合成合法的URL

二、DNS域名解析

DNS：域名系统，全称Domain Name System，它就像一个地址簿，把域名和ip地址对应起来。
在客户端输入URL后，会有一个递归查找的过程，从浏览器缓存中查找 -> 本地host文件查找 -> 本地DNS解析器缓存中查找 -> 本地DNS服务器查找，这个过程中任何一步找到了都会结束查找流程。

三、建立TCP连接

进行三次握手，建立TCP连接

1. 第一次握手：建立连接。客户端发送连接请求报文，将SYN位置为1，Sequence Number 为X；然后，客户端进入SYN_SEND状态，等待服务器确认；
2. 第二次握手：服务器收到SYN报文段。服务器收到客户端的SYN报文段，需要对这个SYN报文段进行确认，设置Acknowledgment Number为X + 1(Sequence Number + 1);同时，自己还要发送SYN请求信息，将SYN位置为1，Sequence Number为Y；服务器端将上述所有信息放到一个报文段（即SYN+ACK报文段）中，一并发给客户端，此时服务器进入SYN_RECV状态。
3. 第三次握手：客户端收到服务器的SYN + ACK报文段。然后将Acknowledgment Number设置为y + 1,向服务器发送ACK报文段，这个报文段发送完毕以后，客户端和服务器端都进入ESTABLISHED状态，完成TCP三次握手。
   

ACK（Acknowledgement）标识位：此标志表示应答域有效，就是说前面所说的TCP应答号将会包含在TCP数据包中，有两个取值：0和1，为1的时候表示应答域有效，反之为0。TCP协议规定，只有ACK=1时有效，也规定连接建立后所有发送的报文的ACK必须为1。
SYN（Synchronize Sequence Number）同步序列编码:在连接建立时用来同步序号。当SYN=1而ACK=0时，表明这是一个连接请求报文。对方若同意建立连接，则在响应报文中使SYN = 1和ACK = 1。因此，SYN置1就表示这是一个连接请求或接受报文。
FIN(finish)即终结的意思，用来释放一个连接。当FIN = 1时，表明此报文段的发送方的数据已经发送完毕，并要求释放连接。
seq(Sequence number)顺序号码，seq为什么要随机，主要是出于网络安全的因素着想。如果不是随机产生初始序列号，黑客将会以很容易的方式取到你和其他主机之间通信的初始化序列号，并且伪造序列号进行攻击。
ack (Acknowledgement Number) 确认号

思考：为什么要三次握手
主要是为了防止已失效的连接请求报文突然又传送到了服务器端，因而产生错误。
假定出现一种异常情况：客户端发出的第一个连接请求报文没有丢失，而是在某些网络节点长时间滞留了，以致延误到连接释放以后的某个时间才到达服务器端。本来这是一个早已失效的报文段，但服务器端收到此失效的连接报文后，就误认为是客户端又发出一次新的连接请求。于是就向客户端发出确认报文，同意建立连接。假定不采用三次握手，那么只要服务器端发出确认，新的连接就建立了。
由于现在客户端并没有发出建立连接的请求，因为不会理睬服务器端的确认，也不会向服务器端发送数据。但服务器端却以为新的连接已经建立了，并一直等待客户端发来数据，服务器端的许多资源就这样白白浪费了。
采用三次握手的办法可以防止上述现象的发生。例如在刚才的情况下，客户端不会向服务器端的确认发出确认。服务器端由于收不到确认，就知道客户端并没有要求建立连接。

四、发送HTTP请求，服务器处理请求，返回响应结果

TCP连接建立后，浏览器就可以利用HTTP/HTTPS协议向服务器发送请求了。服务器接收到请求，就解析请求头，注意：在这里需要判断头部是否会有缓存相关信息，这也是在面试中经常会问到的一个知识点。

浏览器缓存，也称Http缓存，分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。

• 强缓存
  强缓存是利用http头中的Expires和Cache-Control两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的expires和cache-control判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。

• 协商缓存
  协商缓存依赖于服务器和浏览器之间的通信。协商缓存机制下，浏览器需要向服务器去询问缓存的相关信息，进而判断是重新发起请求、下载完整的响应，还是从本地取缓存的资源。如果服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器，这种情况下网络请求对应的状态码是304。协商缓存的实现主要是根据响应头中的Last-Modified和Etag字段。

五、关闭TCP连接

当服务器与客户端没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的三次握手类似，关闭TCP连接，需要四次分手。
1. 第一次分手：主机1（可以是客户端，也可以是服务器端），设置Sequence Number和Acknowledgment Number，向主机2发送一个FIN报文段；此时主机1进入FIN_WAIT_1状态，这表示主机1没有数据要发送给主机2了；
2. 第二次分手：主机2收到主机1发送的FIN报文段，向主机1回一个ACK报文段，Acknowledgment Number为Sequence Number加1；主机1进入FIN_WAIT_2状态；主机2告诉主机1，我“同意”你的关闭请求；
3. 第三次分手：主机2向主机1发送FIN报文段，请求关闭连接，同时主机2进入LAST_ACK状态；
4. 第四次分手：主机1收到主机2发送的FIN报文段，向主机2发送ACK报文段，然后主机1进入TIME_WAIT状态；主机2收到主机1的ACK报文段以后，就关闭连接；此时，主机1等待2MSL后依然没有收到回复，则证明Server端已正常关闭，那好，主机1也可以关闭连接了。

六、页面渲染

页面渲染大概流程：

（1） 浏览器把获取到的html代码解析成一个dom树；
（2） 把所有样式（主要包括css和浏览器的样式设置）解析成样式体；
（3） Dom树和样式结构体结合后构建渲染树（render tree）；
（4） 渲染树构建完毕后，浏览器根据渲染树绘制页面。

这里涉及到两个重要概念：回流Reflow和重绘Repaint

回流：当渲染树的一部分或者全部因为元素的规模尺寸、布局，隐藏等改变需要重新构建的过程就是回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘：当渲染树的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，比如background-color，这就是重绘。

回流一定会引起重绘，重绘不一定引起回流。

什么情况会引起回流？
（1）页面渲染初始化
（2）改变字体，改变元素尺寸
（3）改变元素内容（文本或图片等或用户在input框中输入文字）
（4）Dom结构变化，比如删除了某个节点
（5）窗口resize事件触发

怎样减少回流和重绘？
（1）不要一个一个的改变元素的样式属性，最好直接改变className
（2）先display：none隐藏元素，然后对该元素进行操作，最后再显示该元素。因为对display：none的元素进行操作不会引起回流、重绘。
（3）将引起回流的属性赋值给变量，进行缓存，需要用的时候直接使用变量
（4）减少操作影响的节点，影响的节点越多，则越消耗性能

参考资料

1.面试官：浏览器输入URL后发生了什么？
2.在浏览器输入URL回车之后发生了什么？（超详细版）
3.通俗大白话来理解TCP协议的三次握手和四次分手