浏览器是如何工作的？

浏览器的工作过程涉及多个复杂环节，从用户输入网址到页面最终呈现，需经历DNS解析、请求发送、资源解析与渲染等核心步骤。以下是具体流程：

• 用户输入网址（如
  www.baidu.com
  ）后，浏览器需获取服务器的IP地址。由于网络通信依赖IP，而用户更易记忆域名，因此需通过DNS服务器完成域名到IP的转换。
• 过程：

  浏览器检查本地缓存（如hosts文件或浏览器DNS缓存）是否有对应IP。

  若无缓存，则向配置的DNS服务器（如运营商DNS）发起查询。

  DNS服务器逐级查询（根域名服务器→顶级域名服务器→权威域名服务器），最终返回目标IP。

• 意义：DNS解析是网络访问的第一步，其效率直接影响页面加载速度。

• 获取IP后，浏览器通过TCP协议与服务器建立可靠连接。TCP连接需完成“三次握手”：

  客户端发送SYN包，请求建立连接。

  服务器回复SYN+ACK包，确认收到请求并同意连接。

  客户端发送ACK包，确认连接建立。

• 目的：确保双方通信准备就绪，避免数据丢失或乱序。

• 连接建立后，浏览器发送HTTP请求（如GET /index.html HTTP/1.1），请求服务器返回页面资源。
• 请求内容：包括请求方法（GET/POST）、请求头（User-Agent、Cookie等）和请求体（表单数据等）。
• 服务器响应：返回状态码（如200表示成功）、响应头（Content-Type、Cache-Control等）和响应体（HTML文档）。

• 浏览器接收到HTML字符串后，需将其解析为可操作的DOM树（文档对象模型）。
• 过程：

  词法分析：将HTML字符串分解为标记（如开始标签、结束标签、属性等）。

  语法分析：根据标记构建节点树，形成嵌套的DOM结构。

  错误处理：忽略无效标记或自动修正（如未闭合的标签）。

• 意义：DOM树是页面内容的基础，后续CSS和JS操作均依赖此结构。

• CSS解析：

  浏览器解析CSS文件或内联样式，生成CSSOM树（CSS对象模型）。

  CSSOM树与DOM树结合，形成渲染树（Render Tree），仅包含需显示的节点及其样式。

• JS解析：

  遇到JS代码时，浏览器暂停HTML解析（除非JS标记为async或defer），执行JS引擎（如V8）。

  JS可能修改DOM或CSSOM（如动态添加元素或修改样式），需重新计算渲染树。

• 关键点：CSS阻塞渲染，JS阻塞解析，需合理优化资源加载顺序。

• 布局（Reflow）：

  根据渲染树计算每个节点的几何信息（位置、大小）。

  触发布局的条件：首次渲染、窗口大小变化、DOM或CSS修改等。

• 绘制（Repaint）：

  将布局结果转换为屏幕上的像素，生成图层。

  复合图层（如带有transform的元素）可能由GPU处理，提升性能。

• 优化：减少Reflow和Repaint（如避免频繁操作DOM、使用CSS动画替代JS动画）。

• 渲染完成后，浏览器将最终画面显示在屏幕上，用户可看到完整页面。
• 后续操作：

  加载图片、字体等子资源。

  执行异步JS（如setTimeout、XMLHttpRequest）。

  监听用户交互（点击、滚动等）。

• 用户界面：地址栏、书签栏、前进/后退按钮等。
• 浏览器引擎：协调用户界面与渲染引擎的交互。
• 渲染引擎：负责解析HTML/CSS并渲染页面（如Blink、Gecko）。
• 网络模块：处理HTTP请求、缓存、安全协议等。
• JS引擎：执行JS代码（如V8、SpiderMonkey）。
• 数据存储：管理Cookie、LocalStorage、IndexedDB等。

1. 输入
   www.baidu.com
   ，DNS解析返回IP（如110.242.68.66）。
2. 建立TCP连接，发送HTTP请求。
3. 服务器返回HTML、CSS、JS等资源。
4. 浏览器解析HTML构建DOM树，解析CSS构建CSSOM树。
5. 合并为渲染树，计算布局并绘制。
6. 显示页面，加载图片等子资源。

浏览器的工作是多模块协作的复杂过程，涉及网络通信、解析算法、渲染优化等多个领域。理解其原理有助于优化页面性能（如减少DNS查询、压缩资源、使用CDN等），提升用户体验。