前端面试题:输入url到页面显示的整个过程

1.输入url到页面显示所有过程

1.1 DNS过程

• 首先搜索浏览器的DNS缓存，缓存中维护一张域名和ip地址的对照表；
• 若没有命中，继续搜索操作系统的DNS缓存以及hosts文件；
• 若没有命中，操作系统会将域名发给本地域名服务器，本地域名服务器查询自己的DNS缓存，查询成功就返回结果
• 若本地域名的DNS没有查询成功，则会向根域名服务器发送请求，根域名服务器会根据请求的域名数据来返回顶级域名服务器的地址给本地服务器；
• 本地域名服务器拿到顶级域名服务器的地址之后，会向顶级域名服务器发送请求，获取权威(权限)域名服务器的地址；
• 本地域名服务器拿到权威(权限)域名服务器的地址之后，会向权威(权限)域名服务器发生请求，得到该域名最终的ip地址；
• 本地域名服务器将获取的IP地址返回给操作系统，同时自己将IP地址缓存起来；
• 操作系统将IP地址返回给浏览器，同时自己将IP地址缓存起来；
• 至此，浏览器就得到了该域名对应的IP地址，吧将ip地址缓存起来。

注意:主机到本地dns是递归查询，本地dns后面的查询是迭代查询

1.2 TCP连接

获得IP地址后,浏览器会通过TCP（传输控制协议）与服务器的指定端口建立连接。这通常通过所谓的三次握手过程完成，确保数据的可靠传输‌。

1.3 发送HTTP请求

一旦连接建立，浏览器会构造一个HTTP请求包，并通过TCP连接发送到服务器。HTTP请求包括请求行（如GET /index.html HTTP/1.1）、请求头（包含浏览器类型、接受的响应格式等信息），以及请求体（对于诸4如POST请求的情况）

1.4 服务器处理请求

服务器收到请求后，会根据请求行中的资源路径，如整个网页或网页上的资源（图片、视频等）的路由来处理请求和获取响应数据‌。

1.5 响应HTTP请求

服务器处理完毕后，会构建一个HTTP响应包，包括响应状态码（如200表示成功，404表示未找到资源等）、响应头（包括内容类型和长度等），以及响应体，即请求的文件或错误信息‌。

1.6 浏览器处理服务器响应

浏览器接收到HTTP响应后，会根据状态码以及头信息来处理返回的内容。如果是网页，浏览器将对HTML内容进行解析，并请求网页上引用的其它资源（CSS、JavaScript文件、图片等）‌

1.7 渲染页面

详细见我写的文章https://blog.csdn.net/fageaaa/article/details/146296227

• 解析html—Parse HTML
• 样式计算—Recalculate Style
• 布局—Layout
• 分层—Layer
• 绘制—Paint
• 分块—Tiling
• 光栅化—Raster
• 画—Draw

1.8 关闭TCP连接

这就涉及到四次挥手:

2.总结

• DNS过程
  主机到本地dns是递归查询，本地dns后面的查询是迭代查询
• TCP连接
  三次握手协议
• 发送HTTP请求报文
• 服务器处理请求
• 接受HTTP响应报文
• 浏览器处理服务器响应
• 渲染页面
  • 解析html—Parse HTML
  • 样式计算—Recalculate Style
  • 布局—Layout
  • 分层—Layer
  • 绘制—Paint
  • 分块—Tiling
  • 光栅化—Raster
  • 画—Draw