【最终】浏览器原理&GPU图形总结

一、浏览器进程模型

​​多进程架构设计​​

• ​​进程​​：资源分配的基本单位，每个标签页独立渲染进程（崩溃隔离）
• ​​线程​​：CPU调度的最小单位，共享进程内存空间

​​核心进程分工​​：

• 浏览器主进程（界面管理）
• 渲染进程（页面渲染，含主线程）
• GPU进程（图形加速）
• 网络进程（资源加载）
• 插件进程（沙盒隔离）
  ​​

单线程渲染的必然性​​

• JS单线程根源：避免多线程同时操作DOM导致状态冲突（如删除与修改竞争）
• 解决方案：事件循环机制实现异步调度

浏览器渲染各个过程：
以下是浏览器渲染过程的详细总结及常见面试题解析，结合关键渲染路径（Critical Rendering Path）和性能优化策略，帮助系统性掌握该知识点。

一、浏览器渲染核心流程详解

1. 解析阶段

• 构建DOM树：
  • 过程：HTML解析器将HTML字节流转换为标记（Token），再生成节点（Node），最终构建树状结构的DOM树。
  • 阻塞点：同步<script>标签会阻塞DOM解析（除非使用async/defer）。
• 构建CSSOM树：
  • 过程：CSS解析器将样式表解析为CSSOM树（样式规则树），描述元素样式继承与层叠关系。
  • 阻塞点：CSS加载会阻塞渲染树合成（Render Tree构建），但不阻塞DOM解析（两者并行）。
    
    
    
    

2. 渲染树合成（Render Tree，计算属性）

• 过程：合并DOM树和CSSOM树，生成仅包含可见节点的渲染树（如display:none的元素被忽略）。
• 关键点：渲染树节点包含几何属性（位置、尺寸）和样式信息。
  
  
  

3. 布局（Layout/Reflow）

• 过程：计算渲染树中每个节点的精确位置和大小（如宽度、边距）。
• 触发条件：改变元素几何属性（如width、font-size）、窗口大小变化等。
• 性能影响：回流（Reflow）需重新计算整个布局树，开销最大。
  Flex布局常考面试题目
  
  <