Skip to content

解释一个网页从请求开始到最终显示给用户的完整过程?

一个网页从用户请求到最终显示在浏览器上的完整过程可以概括为以下步骤:

  1. 用户输入URL:用户在浏览器的地址栏中输入想要访问的网页地址(URL)并按下回车。
  2. 域名解析:浏览器首先将URL中的域名通过DNS(域名系统)解析为对应的Web服务器的IP地址。这个过程可能包括查询本地缓存、路由器缓存、ISP DNS缓存以及递归查询直至找到权威DNS服务器。
  3. 建立TCP连接:解析到IP地址后,浏览器使用TCP/IP协议与Web服务器建立连接。这通常涉及到TCP的三次握手过程,以确保数据传输的可靠性。
  4. 发送HTTP请求:建立连接后,浏览器向Web服务器发送HTTP请求。请求中包含请求行(包括方法如GET或POST,URL,协议版本)、请求头(包含浏览器信息、接受的内容类型等)以及可能的请求体(如POST请求的数据)。
  5. 服务器处理请求:Web服务器接收到请求后,根据URL和请求方法,处理请求,这可能包括查询数据库、执行服务器端脚本(如PHP、Java、Python等)以及生成响应内容。
  6. 响应与数据传输:服务器完成处理后,将响应数据(包括状态码、响应头和响应体)发送回浏览器。响应体可能包含HTML、CSS、JavaScript文件、图片等资源。
  7. 解析HTML:浏览器接收到HTML响应后,开始解析HTML文档,构建DOM(文档对象模型)树,并根据CSS构建CSSOM(CSS对象模型)树,结合这两棵树构建渲染树,计算样式和布局(Layout)。
  8. 渲染页面:根据渲染树,浏览器开始绘制页面,将文本、图像、形状等元素布局到屏幕上。同时,浏览器会并行下载CSS、JavaScript文件及图片等其他资源。
  9. 执行JavaScript:浏览器执行页面中的JavaScript代码,这可能改变DOM结构、CSSOM,引发重绘或回流(Reflow)操作。JavaScript还可以通过Ajax异步请求更多数据,进一步修改页面内容。
  10. 加载额外资源:页面中的JavaScript可以动态加载更多的资源,浏览器会继续请求这些资源并渲染到页面上。
  11. 完成加载与交互:当所有初始资源加载完毕且执行完毕后,浏览器标记页面为“完成加载”。用户可以开始与页面交互,交互过程中可能触发额外的AJAX请求和页面更新。
  12. 连接关闭:在HTTP/1.1中,TCP连接可能保持开启以支持后续请求(持久连接),但在某些情况下,如页面加载完毕或一段时间无活动,连接会被关闭。HTTP/2和HTTP/3通过多路复用和更高效的连接管理进一步优化了这一过程。