浏览器输入URL到显示页面的大致过程

浏览器输入URL：

URL输入浏览器后，主进程会先判断用户输入的是URL还是关键字，如果是URL就交给网络进程，如果是关键字就会调用默认的搜索引擎去合成一个带有搜索关键字的URL。如果直接就是URL，浏览器会对URL进行一个识别，抽取出域名，先在本地查找是否有该域名的映射记录，如果有，则完成域名解析；没有则进行DNS解析。

DNS解析：根据域名查出对应的 IP 地址

本地查找没有找到指定的映射记录，浏览器会向DNS服务器发起请求，进行DNS解析，解析出URL中的域名对应的IP地址。

DNS服务器（也称为域名服务器）负责存储域名和 IP 地址的映射关系，当我们需要获取某个域名对应的 IP 地址时，只需要从域名服务器中查询即可。

由于域名非常多，如果都存放在一台域名服务器中，那么不仅查询速度慢，服务器压力大，而且难以保证服务的可靠性。因此，DNS 采用了分布式的设计方案，大量的域名服务器之间通过层次方式组织，分布在全世界范围内。

……每个二级域名服务器都知道其所管理的所有三级域名服务器的 IP 地址，比如负责baidu.com域的二级域名服务器知道负责www.baidu.com域的三级域名服务器的 IP 地址，因为www.baidu.com域名和其 IP 地址就存储在负责baidu.com域的域名服务器中……

本地计算机在接入网络的时候，都会自动分配一个DNS服务器的IP地址，这个DNS服务器叫做本地域名服务器，一般是由网络服务商提供的。

请求主机向本地域名服务器发送 DNS 查询报文，询问http://www.baidu.com的 IP 地址是什么；

本地域名服务器转发此查询报文到根域名服务器；

根域名服务器发现要查询的顶级域名为com，于是向本地域名服务器发送响应报文，报文中封装了负责com域的顶级域名服务器的 IP 地址列表；

本地域名服务器收到根域名服务器响应的报文后，选择其中一个顶级域名服务器的 IP 地址，并向其发送查询报文；

顶级域名服务器发现要查询的二级域名为baidu，于是向本地域名服务器发送响应报文，报文中封装了负责baidu.com域的二级域名服务器的 IP 地址列表；

本地域名服务器收到顶级域名服务器响应的报文后，选择其中一个二级域名服务器的 IP 地址，并向其发送查询报文；

二级域名服务器通过查询数据库，找到http://www.baidau.com的 IP 地址，并将此信息封装为一个响应报文，发送给本地域名服务器；

本地域名服务器将响应报文发送给原请求主机。请求主机就知道了http://www.baidau.com的 IP 地址，DNS 查询过程结束。

建立TCP连接：三次握手建立客户端和服务器的连接

浏览器根据IP地址和默认80端口，和服务器建立TCP连接。

第1次握手：客户端--->服务端：客户端向服务器端发送一段带有 SYN 标志的数据包，请求建立连接；

第2次握手：服务端--->客户端：服务器端收到来自客户端的TCP报文后，结束 LISTENING（监听） 状态，并返回一段带有 SYN + ACK 标志的数据包，表明已收到来自客户端的数据，同时将自身状态改为 SYN_RCVD（等待请求确认） 状态；

第3次握手：客户端--->服务端：客户端收到来自服务器端的确认收到数据的TCP报文后，再次发送一段TCP报文，表明客户端已收到服务器端的确认信息，同时将自身状态改为 ESTABLISHED（连接成功） 状态，服务器端收到报文后，也将自身状态改为 ESTABLISHED（连接成功） 状态。

发送HTTP请求/返回响应结果

与服务器建立TCP连接后，浏览器发送HTTP请求报文给服务器，请求报文格式由请求行、请求头部、空行、请求数据组成。

服务器接收到HTTP请求报文以后，会处理请求报文，并做出响应，将HTTP响应报文发送给浏览器，响应报文格式由状态行、响应头部、空行、响应数据组成。

关闭TCP连接：四次挥手关闭客户端和服务器的连接

数据传输完毕后，TCP断开连接，释放资源。

第1次挥手：客户端--->服务端：

第2次挥手：服务器--->客户端：

第3次挥手：服务器--->客户端：

第4次挥手：客户端--->服务端：

浏览器解析渲染页面

浏览器接收到静态资源后。

解析HTML，并搭建DOM树：浏览器接收到 html 文件后将其解析成 DOM 树，这个解析从接收到 html 文件 的时候就已经开始了，并不是等到接收完成后才开始，解析的过程是自上而下，先解析当前节点的所有子节点，再解析兄弟节点及其子节点。

解析CSS，并搭建CSS规则树：浏览器将所有的 css 包括其自身的样式全部解析成样式树，解析的过程中会自动去掉浏览器不能识别的样式。

将HTML和CSS结合，搭建Render树（渲染树）：将每个 HTML 节点与其对应的 CSS 样式结合，搭建 Render 树。

根据渲染树计算布局：根据已经生成好的 Render 树 ，计算每个节点的颜色、尺寸及位置等信息。

将元素绘制到页面上：将计算好的节点绘制到页面上，这个过程可能会产生重绘和重排（回流），要尽量避免回流。