当用户在浏览器地址栏输入网址并回车后,从服务器到页面展现的过程中
- DNS 解析:
- 浏览器首先会根据输入的域名进行 DNS 解析,将域名解析为对应的 IP 地址,以便浏览器发起请求时能够准确找到服务器的位置。
- 建立连接:
- 浏览器通过 TCP/IP 连接与服务器建立连接,TCP 握手保证连接的可靠性,然后开始发送 HTTP 请求。
- 发起请求:
- 浏览器向服务器发送 HTTP 请求,请求包括请求行、请求头和请求体,其中请求头中包含有关缓存的信息(如 If-Modified-Since、If-None-Match)。
- 服务器处理请求:
- 服务器接收到浏览器的请求后,会根据请求路径和参数执行相应的操作,生成响应内容。
- 返回响应:
- 服务器处理完请求后,将响应发送回浏览器。响应包括状态码、响应头和响应体,响应头中包含有关缓存的信息(如 Cache-Control、Last-Modified、ETag)。
- 强缓存:
- 浏览器根据响应头中的 Cache-Control 或 Expires 判断是否使用强缓存。如果缓存命中,则直接从缓存中获取资源,不发送请求到服务器。
- 协商缓存:
- 如果强缓存未命中,浏览器将根据响应头中的 Last-Modified 或 ETag 标识符发送条件请求到服务器,服务器会验证资源是否更新。
- 如果资源未更新,服务器返回 304 Not Modified 状态码,并使用缓存。
- 若资源已更新,服务器返回新的资源内容和 200 OK 状态码。
- 如果强缓存未命中,浏览器将根据响应头中的 Last-Modified 或 ETag 标识符发送条件请求到服务器,服务器会验证资源是否更新。
- 接收响应:
- 浏览器接收到服务器返回的响应后,会根据响应头中的 Content-Type 判断响应内容的类型。
- 解析 HTML:
- 浏览器解析 HTML 并构建 DOM 树,同时会下载 CSS、JavaScript 等外部资源,发出额外的网络请求。
- 构建渲染树:
- 浏览器根据 DOM 树和 CSS 样式表构建渲染树,其中不包括隐藏的元素。
- 布局和绘制:
- 浏览器根据渲染树执行布局(Layout)和绘制(Paint),确定每个节点的几何信息和样式,然后绘制页面内容。
- 页面呈现:
- 最终页面内容会在浏览器窗口中展现给用户,完成整个页面加载和展示的过程。