浏览器工作原理总览

一、是什么

浏览器是一个将 URL、HTML、CSS、JS 转换为可视化页面的复杂软件系统。

核心作用: 👉 “把代码变成用户看到的页面”

二、整体流程

浏览器工作可以分为 6 步: URL 输入 → DNS解析 → HTTP请求 → HTML解析 → 渲染 → 页面展示

三、关键流程拆解

1. DNS 解析

作用:

  • 将域名转换为 IP 地址

例如: www.google.com → 142.xxx.xxx.xxx

2. HTTP 请求

浏览器向服务器请求资源:

  • HTML
  • CSS
  • JS
  • 图片

3. HTML 解析(DOM Tree)

浏览器解析 HTML 👉 生成 DOM 树

示例:

<div>
  <p>Hello</p>
</div>

变成

DOM Tree
└── div
    └── p

4. CSS 解析(CSSOM)

CSS 被解析为: 👉 CSS Object Model

5. 合并 Render Tree

DOM + CSSOM → Render Tree

用于确定:

  • 哪些元素需要显示
  • 每个元素样式

6. Layout(回流)

计算:

  • 位置
  • 大小

7. Paint(重绘)

绘制像素到屏幕

8. Composite(合成)

GPU 层合成最终页面

四、关键性能点

  1. 回流(Reflow)

影响布局

  1. 重绘(Repaint)

影响样式但不影响布局

五、总结

浏览器本质是一个:

HTML + CSS + JS → 计算 → 像素

理解它可以:

  • 优化性能
  • 解决卡顿问题
  • 写更高质量前端代码