web前端之浏览器从输入URL到页面展示的过程、建立TCP连接与三次握手、发送HTTP请求、DNS解析、地址、渲染

前言

浏览器从输入URL到页面展示的过程，这是一件看似简单却又十分复杂的事情。我们每天都在使用浏览器，却很少关注它们背后的工作原理。本文将从多个方面深入探讨浏览器从输入URL到页面展示的完整过程。

DNS解析

当我们在浏览器中输入URL时，浏览器会向DNS服务器发送请求，查询该URL所对应的IP地址。
DNS解析的过程可以分为递归查询和迭代查询两种方式。
1、递归查询是指DNS服务器不断地向上级服务器发起请求，直到找到该URL对应的IP地址；
2、迭代查询是指DNS服务器直接向根服务器发起请求，并且从返回的响应中获取下一级服务器的地址，不断向下一级服务器发起请求，直到找到该URL对应的IP地址。

建立TCP连接

DNS解析完成后，浏览器会根据获取到的IP地址，向该IP地址对应的服务器发送TCP连接请求。
TCP连接的建立过程可以分为三次握手。
1、第一次握手：客户端向服务器发送连接请求，并且发送一个随机数作为起始序列号。
2、第二次握手：服务器收到连接请求后，向客户端回复一个确认消息，并且发送一个随机数作为回复序列号。
3、第三次握手：客户端收到服务器的确认消息后，再次向服务器发送确认消息。
TCP三次握手是为了确认客户端和服务端的发送和接收的能力。

发送HTTP请求

TCP连接建立完成后，浏览器会向服务器发送HTTP请求。
HTTP请求的格式一般包括请求方法、请求URL、请求头部和请求体。
请求方法通常有GET、POST、PUT等，常用的是GET和POST。
请求头部包括一些额外的信息，例如浏览器类型、Cookie信息等。请求体则包含客户端提交的数据，例如表单数据、上传的文件等。

服务器处理请求

服务器接收到HTTP请求后，会根据请求的URL和请求方法，执行相应的操作。
常见的操作包括从数据库中查询数据、生成HTML页面等。
服务器处理完成后，会向客户端发送HTTP响应。

接收HTTP响应

浏览器接收到服务器的HTTP响应后，会根据响应头部中的状态码来判断请求是否成功。
如果请求成功，浏览器会根据响应头部中的Content-Type字段来确定响应体的内容类型。
如果是HTML页面，浏览器会将响应体解析成DOM树，并且根据CSS样式对页面进行渲染。

解析HTML

浏览器在渲染页面前，会先将HTML代码解析成DOM树。
DOM树是一种以层次结构组织的节点树，每个节点代表HTML中的一个元素或文本。
浏览器解析HTML代码的过程可以分为标记化和构建DOM树两个阶段。
1、标记化是指将HTML代码分解成多个标记，并且将它们分类为开始标记、结束标记、注释等不同类型。
2、构建DOM树则是将标记化后的HTML代码转换成DOM节点，并且将它们按照层次结构组织起来。

解析CSS

解析HTML完成后，浏览器会解析CSS代码，为每个元素计算出最终的样式。
CSS解析的过程可以分为分词、解析和计算三个阶段。
1、分词是指将CSS代码分解成多个不同的词汇，例如选择器、属性名、属性值等。
2、解析则是将分词后的CSS代码转换成CSS对象模型(CSSOM)，并且将它们按照层次结构组织起来。
3、计算则是为每个元素计算出最终的样式，并且将它们应用到DOM树上。

渲染页面

将DOM树和样式应用到页面上进行渲染。
浏览器会根据DOM树和样式来计算每个元素的位置和大小，并且将它们绘制到屏幕上。
渲染页面的过程可以分为生成布局、生成绘制列表和绘制三个阶段。
1、生成布局是指根据DOM树和样式计算出每个元素的位置和大小。
2、生成绘制列表则是将每个元素的绘制操作记录下来。
3、绘制则是将记录下来的绘制操作应用到页面上进行绘制。