网页从点击到显示：前端开发视角下的旅程

网页从点击到显示：前端开发视角下的旅程

当用户点击一个链接时，一系列复杂而精妙的步骤在幕后展开，最终将网页呈现在眼前。从前端开发的角度来看，这个过程涵盖了网络请求、浏览器解析、渲染等多个环节。

1. DNS 解析 (Domain Name System Resolution)

这是旅程的第一步。当你在浏览器中输入一个网址或点击一个链接时，浏览器首先要知道这个域名对应的服务器 IP 地址是什么。

• 有关概念：
  • DNS 缓存： 浏览器会检查本地 DNS 缓存、操作系统 DNS 缓存、路由器 DNS 缓存、ISP（互联网服务提供商）的 DNS 缓存，以提高解析速度。
  • DNS 解析流程： 如果缓存中没有，请求会依次发给本地 DNS 服务器、根 DNS 服务器、顶级域名 (TLD) DNS 服务器，最终找到权威 DNS 服务器，获取目标 IP 地址。
  • DNS Prefetching： 浏览器的一种优化技术，预先解析未来可能访问的域名，减少实际点击时的延迟。
    

2. 建立 TCP 连接 (Transmission Control Protocol Connection)

获取到 IP 地址后，浏览器会与服务器建立 TCP 连接。这是一个可靠的、面向连接的传输协议。

• 有关概念：
  • 三次握手 (Three-way Handshake)： 浏览器（客户端）发送 SYN 包请求连接，服务器返回 SYN-ACK 包确认并请求连接，客户端再发送 ACK 包确认，连接建立。
  • 目的： 确保客户端和服务器都能发送和接收数据，并协商好传输序列号。
    

3. 发送 HTTP 请求 (Hypertext Transfer Protocol Request)

TCP 连接建立后，浏览器就可以向服务器发送 HTTP 请求了。

• 相关概念：
  • HTTP 请求报文： 包含请求行（请求方法、URL、HTTP 版本）、请求头（如 User-Agent、Accept、Cookie、Cache-Control 等）、请求体（GET 请求通常没有，POST 请求才有）、响应等。
  • 请求方法 (HTTP Methods)： GET、POST、PUT、DELETE、HEAD、OPTIONS 等，各自的语义和使用场景。
  • HTTP/1.1、HTTP/2、HTTP/3： 不同版本的特性，如 HTTP/1.1 的长连接、管道化；HTTP/2 的多路复用、服务器推送、头部压缩；HTTP/3 基于 UDP 的 QUIC 协议。
    

4. 服务器处理请求并返回 HTTP 响应

服务器接收到 HTTP 请求后，会根据请求内容进行处理，例如查询数据库、执行业务逻辑，然后生成 HTTP 响应。

• 相关概念：
  • HTTP 响应报文： 包含状态行（HTTP 版本、状态码、状态信息）、响应头（如 Content-Type、Cache-Control、Set-Cookie 等）、响应体（通常是 HTML、CSS、JavaScript、图片等资源）。
  • HTTP 状态码： 常见的 200 OK、301 Moved Permanently、302 Found、304 Not Modified、400 Bad Request、401 Unauthorized、403 Forbidden、404 Not Found、500 Internal Server Error 等。

5. 浏览器解析渲染页面 (Browser Parsing and Rendering)

前端开发的核心环节，浏览器会下载并解析接收到的资源，最终将网页呈现在屏幕上。

• 相关概念：

  • 构建 DOM 树 (Document Object Model)： 浏览器解析 HTML 文件，将 HTML 标签转化为 DOM 节点，生成 DOM 树。
  • 构建 CSSOM 树 (Cascading Style Sheet Object Model)： 浏览器解析 CSS 文件，生成 CSSOM 树。
  • 构建渲染树 (Render Tree / Layout Tree)： DOM 树和 CSSOM 树合并，生成渲染树。渲染树只包含需要显示的节点及其样式信息。display: none 的元素不会进入渲染树。
  • 布局 (Layout / Reflow)： 浏览器计算渲染树中每个节点的位置和大小。这个过程是耗时的，任何引起元素几何属性变化的 CSS 修改都会触发回流。
  • 绘制 (Painting)： 浏览器将渲染树中的每个节点绘制到屏幕上，包括颜色、边框、阴影等。
  • 合成 (Compositing)： 浏览器将所有绘制好的图层合并，最终呈现在屏幕上。

• JavaScript 的影响：

  • 阻塞渲染： 默认情况下，<script> 标签会阻塞 HTML 解析和渲染。这是因为 JavaScript 可能会修改 DOM 或 CSSOM，浏览器需要等待 JavaScript 执行完毕才能继续渲染。
  • async 和 defer： 用于优化 JavaScript 加载和执行。加载这样的脚本不会阻塞页面渲染，用户可以立即查看页面。但它们也有区别：

	顺序	DOMContentLoaded
async	加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行	不相关。可能在文档加载完成前加载并执行完毕。如果脚本很小或者来自于缓存，同时文档足够长，就会发生这种情况。
defer	文档顺序（它们在文档中的顺序）	在文档加载和解析完成之后（如果需要，则会等待），即在 DOMContentLoaded 之前执行。

• 性能优化：
  • 减少 HTTP 请求： 合并 CSS/JS 文件、使用精灵图、CDN 等。
  • 利用缓存： HTTP 缓存（强缓存、协商缓存）、浏览器缓存。
  • 优化资源加载： 图片懒加载、字体优化、Preload/Prefetch 等。
  • 优化渲染： 减少回流和重绘、使用 transform 和 opacity 动画（GPU 加速）。
  • 性能监控： Lighthouse、Web Vitals 等工具。

6. 关闭 TCP 连接

当所有资源加载完毕，或者用户关闭页面时，TCP 连接会被断开。

• 相关概念：
  • 四次挥手 (Four-way Handshake)： 客户端和服务器各自发送 FIN 包，并接收对方的 ACK 包，最终关闭连接。
    

总结

从点击链接到网页显示，这是一个涉及到网络协议、浏览器工作原理、前端性能优化等多个方面复杂而协同的过程。理解这些步骤对于前端开发者来说至关重要，它不仅能帮助我们更好地调试和解决问题，更能指导我们进行有效的性能优化，从而提供更流畅的用户体验。

常见 HTTP 状态码

状态码	分类	含义	主要用途/表现	注意事项
200 OK	成功	请求已成功，服务器已返回请求的数据。	最常见的成功响应，通常伴随响应体数据。	即使响应体为空也可能返回；API 和页面请求均适用。
301 Moved Permanently	重定向	永久重定向，资源已被永久移动到新 URL。	SEO 友好，搜索引擎会传递权重；浏览器会缓存新地址。	一旦设置难以撤销；谨慎使用，确认新地址是永久的；调试时需清除缓存。
302 Found	重定向	临时重定向，资源暂时在新的 URL 处。	用于临时跳转，如网站维护、登录跳转等。	对 SEO 不友好，不传递权重；浏览器不缓存新地址；注意重定向后请求方法的变化。
304 Not Modified	重定向	未修改，客户端可使用缓存的副本。	性能优化，减少网络传输；配合 Last-Modified 或 ETag 使用。	浏览器自动处理，无需前端特别操作；确保服务器正确发送缓存相关响应头。
400 Bad Request	客户端错误	客户端请求语法错误，服务器无法理解。	请求参数不正确、请求体格式错误、缺少必要字段等。	前端问题，需检查请求数据和格式；后端应提供详细错误信息。
401 Unauthorized	客户端错误	未经授权，需要身份验证。	用户未登录、Token 过期或无效。	与 403 区分（401是未认证，403是无权限）；前端需引导用户重新登录或刷新 Token。
403 Forbidden	客户端错误	禁止访问，服务器拒绝执行请求。	用户已认证但无权访问该资源，或服务器明确拒绝该请求。	与 401 区分（已认证但无权限）；后端需要完善的权限管理逻辑。
404 Not Found	客户端错误	未找到，请求的资源在服务器上不存在。	URL 拼写错误、资源已删除、后端未定义相应路由。	最常见错误；前端应提供友好的 404 页面；后端需检查路由配置和资源是否存在。
500 Internal Server Error	服务器错误	内部服务器错误，服务器无法完成请求。	后端代码逻辑错误、数据库连接失败、第三方服务无响应等。	后端问题；后端需详细记录日志以便排查；前端应显示友好提示，不暴露内部错误信息。

参考：https://zh.javascript.info/script-async-defer
博客内容如有错误欢迎指正~