前端面试题：输入一个URL后敲下URL后，浏览器从解析URL、DNS查询、检查缓存、通过CDN获取资源、建立连接发送请求

敲下URL后，浏览器从解析URL、DNS查询、检查缓存、通过CDN获取资源、建立连接发送请求，到最终渲染页面，经历了多个步骤。浏览器通过构建DOM和CSSOM书、执行JavaScript、进行布局和绘制，最终讲页面显示给用户。同时，缓存和CDN的使用大大提高了资源加载速度，优化了用户体验

具体步骤如下

1. URL分解和DNS解析

URL分解：首先将URL分解为协议、域名、端口、路径和查询参数

DNS解析：浏览器通过DNS解析讲域名转换为IP地址。这个过程可能涉及缓存查询和递归迭代DNS查询，最终获得目标的IP地址

在递归查询中用户的本地DNS会负责从根服务器开始逐级查询，直到获得最终的IP地址，并将结果返回给用户。

在迭代查询中本地DNS会从根服务器开始查询，但每一级DNS服务器只返回下一步查询的地址，不直接返回最终结果，递归解析服务器会逐级请求，直到获得IP地址为止，但它只是把结果传递给下一级

在DNS解析完成后，浏览器会检查本地缓存，避免重复请求资源

强缓存：检查是否有缓存资源未过期，如果有，直接使用缓存资源，不会像服务器发送请求。这通过Cache-Control 和Expires 响应头来控制返回Status Code: 200

协商缓存：如果资源过期或未命中强缓存，浏览器会发送请求到服务器，并附带If-Modified-Since 或Etag 服务器检查资源是否更新，如果没有更新，返回304状态码，浏览器继续使用缓存的资源。

如果缓存资源未命中或不可用，且资源由CDN托管，浏览器可能会从CDN获取资源。CDN是分布式的网络节点，靠近用户的地理位置，从而减少延迟和提高资源加载速度

CDN的作用：CDN缓存常用的静态资源，加速资源传递。浏览器会向CDN最近的节点发起请求，而不是直接请求源服务器。

浏览器与服务器之间会通过三次握手建立TCP链接，如果使用的是HTTPS还需要进行SSL/TLS握手来加密通讯，确保数据传输的安全性。

浏览器与目标服务器建立TCP链接包含以下步骤：

三次握手：
1. SYN：客户端发送SYN包，表示希望建立连接
2. SYN-ACK：服务器接收到SYN包后，响应一个SYN-ACK包，确认链接请求
3. ACK：客户端收到SYN-ACK包，发送一个ACK包，确认链接建立
SSL/TLS握手：如果使用的是HTTPS，在建立TCP链接后，还需要进行SSL/TLS握手，以协商加密算法、验证证书并生成对称加密密钥，用于加密后续的通讯

一旦链接建立，浏览器会构建并发送http请求，包括请求方法、路径、头部信息等，来请求服务器上的资源

具体步骤如下：

服务器接受到请求好，处理并生成HTTP响应。包含状态码、响应头和响应体(html, js资源等)服务器也可以利用缓存控制头来指示浏览器如何缓存资源。

浏览器接受到服务器的响应后，会解析HTML，构建DOM树；解析CSS，构建CSSOM树。然后将两者合并生成渲染树，计算元素布局，最后将页面绘制到屏幕上。JS的执行可能会阻塞这些过程，影响页面的渲染速度。

具体步骤：

解析HTML：浏览器解析HTML文档，根据DOM生成渲染树
加载资源：浏览器解析HTML过程中，遇到外部资源(CSS, JS等)会发起相应的请求加在这些资源。在遇到<script> 标签会阻塞DOM树的构建，浏览器必须先下载并实行JS代码，才能继续解析HTML
CSSOM树构建：浏览器解析CSS文件，生成CSS对象模型树，用于页面的样式渲染。CSS文件的下载不会阻塞HTML解析，但会阻塞渲染树的构建，因为渲染树依赖于CSS样式。
执行JavaScript：浏览器解析并执行JavaScript代码，可能会修改DOM结构或触发页面重绘，这些操作会影响页面的渲染性能。
渲染树构建：
1. 渲染树：浏览器将DOM树和CSSOM树合并，生成渲染树。渲染树包含了页面中可见元素的样式和位置等信息。
2. 布局计算：浏览器基于渲染树计算每个元素的位置和大小，这一步称为布局。
重绘：浏览器根据渲染树和布局结果，将页面内容绘制到屏幕上

在页面加在完成后，浏览器和服务器之间的链接会根据Http协议的规定关闭：