浏览器输入url回车后，会发生什么？

通常我们想访问某一个网址，我们会在浏览器中输入它的域名，然后点击回车进行跳转，这样就可以进到网站的主页，看似简单的两步，其实背后都需要大量的代码在运行，支持，才能完成！那浏览器到底都做了哪些事呢？

一、解析URL

回车键按下，OS返回给浏览器一个“按键按下”事件，浏览器开始解析URL，通过URL，浏览器能够知道以下信息：

传送协议（如：http 或者 https）
服务器（通常为域名，也可以是IP地址）
端口号（比如“:80”）
请求资源页
查询参数

如果协议或者域名不合法，浏览器会当作关键字搜索，将它交给默认的搜索引擎，反之表示这是一个正常的URL，可以进行跳转。

二、DNS查询

url得到了，接下来要根据url得到目标主机的IP地址才能访问，浏览器首先会查看域名是否在自己的缓存中，如果缓存没有，则查看本地host文件，如果host文件也没有找到，它将会向DNS服务器发送一条DNS查询请求，并返回我们目标主机的IP地址。

具体DNS流程如上，百科一下都有而且很详细。

三、TCP连接

当浏览器得到了目标服务器的 IP 地址，以及 URL 中给出来端口号（http 协议默认端口号是 80， https 默认端口号是 443），它会调用系统库函数 socket ，请求一个 TCP流套接字，对应的参数是 AF_INET/AF_INET6 和 SOCK_STREAM 。

这个请求首先被交给传输层，在传输层请求被封装成 TCP segment。目标端口会被加入头部，源端口会在系统内核的动态端口范围内选取（Linux下是ip_local_port_range)

TCP segment 被送往网络层，网络层会在其中再加入一个 IP 头部，里面包含了目标服务器的IP地址以及本机的IP地址，把它封装成一个IP packet。

这个 TCP packet 接下来会进入链路层，链路层会在封包中加入 frame 头部，里面包含了本地内置网卡的MAC地址以及网关（本地路由器）的 MAC 地址。

到了现在，TCP 封包已经准备好了，下面就是连接和发送。

三次握手：

客户端选择一个初始序列号(ISN)，将设置了 SYN 位的封包发送给服务器端，表明自己要建立连接并设置了初始序列号

服务器端接收到 SYN 包，如果它可以建立连接：

服务器端选择它自己的初始序列号
服务器端设置 SYN 位，表明自己选择了一个初始序列号
服务器端把 (客户端ISN + 1) 复制到 ACK 域，并且设置 ACK 位，表明自己接收到了客户端的第一个封包

客户端通过发送下面一个封包来确认这次连接：
- 自己的序列号+1
- 接收端 ACK+1
- 设置 ACK 位

三次握手结束，开始发送数据包：

数据通过下面的方式传输：
当一方发送了N个 Bytes 的数据之后，将自己的 SEQ 序列号也增加N
另一方确认接收到这个数据包（或者一系列数据包）之后，它发送一个 ACK 包，ACK 的值设置为接收到的数据包的最后一个序列号

四次挥手：

要关闭连接的一方Client发送一个 FIN 包，表示自己数据已经发送完了
Server发送ACK报文确认这个 FIN 包，但此时可能并不会关闭
Server确认数据发送完毕，发送一个FIN包，表示自己数据发送结束
Client发送ACK报文确认

四、TLS 握手

客户端发送一个 ClientHello 消息到服务器端，消息中同时包含了它的 Transport Layer Security (TLS) 版本，可用的加密算法和压缩算法。
服务器端向客户端返回一个 ServerHello 消息，消息中包含了服务器端的TLS版本，服务器所选择的加密和压缩算法，以及数字证书认证机构（Certificate Authority，缩写 CA）签发的服务器公开证书，证书中包含了公钥。客户端会使用这个公钥加密接下来的握手过程，直到协商生成一个新的对称密钥
客户端根据自己的信任CA列表，验证服务器端的证书是否可信。如果认为可信，客户端会生成一串伪随机数，使用服务器的公钥加密它。这串随机数会被用于生成新的对称密钥
服务器端使用自己的私钥解密上面提到的随机数，然后使用这串随机数生成自己的对称主密钥
客户端发送一个 Finished 消息给服务器端，使用对称密钥加密这次通讯的一个散列值
服务器端生成自己的 hash 值，然后解密客户端发送来的信息，检查这两个值是否对应。如果对应，就向客户端发送一个 Finished 消息，也使用协商好的对称密钥加密
从现在开始，接下来整个 TLS 会话都使用对称秘钥进行加密，传输应用层（HTTP）内容

五、HTTP请求

tcp建立连接后，浏览器发送请求报文，http请求报文分为三块：

请求行：包括请求方法，协议版本，以及url地址

请求头：包括一些浏览器的设置和内容缓存的信息

请求体：和请求头直接隔一个空行，这个空行表示request heard结束，下面是请求体内容，包含一些要查询的信息等

然后是服务端的相应报文，和请求报文一样分为三部分：

响应行：包括状态码和协议版本

状态码:

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

响应头：包含一些连接的信息

响应体：包含返回给浏览器的一些文本信息，通常html，css，js，图片就放在这里

六、浏览器渲染页面

浏览器是一边解析一边渲染的过程，首先是解析HTML文件构成DOMTree(一个页面的结构)，然后解析CSS文件构建CSSTree（页面的样式），之后是将这两部分整合RenderTree渲染到页面，这个过程比较复杂，涉及到两个概念： reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。还有就是页面在加载过程中，遇到js文件，会停止渲染，直到js加载结束，这样也会影响性能，所以我们应该将js放在页面最后加载！

你看一晃便是一年，匆匆又是一个春天！

写于工作满一年！

Lan XU

2019/03/04