前端面试题库

浏览器渲染流程

4分钟阅读

1. 整体流程概述

浏览器渲染流程主要包含以下几个关键步骤：

  1. 解析HTML构建DOM树
  2. 解析CSS构建CSSOM树
  3. 合并DOM和CSSOM形成渲染树
  4. 布局（Layout/Reflow）
  5. 绘制（Paint）
  6. 合成（Composite）

2. 详细步骤解析

2.1 解析HTML构建DOM树

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <div>
        <h1>标题</h1>
        <p>段落内容</p>
    </div>
</body>
</html>

DOM树结构：

Document
├── html
    ├── head
    │   └── title
    └── body
        └── div
            ├── h1
            └── p

关键特点：

  • HTML解析是渐进式的，边下载边解析
  • 遇到<script>标签会阻塞解析
  • 遇到<link>标签会异步下载CSS

2.2 解析CSS构建CSSOM树

body {
    font-size: 16px;
    margin: 0;
}
 
div {
    background: #f0f0f0;
    padding: 20px;
}
 
h1 {
    color: #333;
    font-size: 24px;
}

CSSOM树结构：

CSSOM
├── body
│   ├── font-size: 16px
│   └── margin: 0
├── div
│   ├── background: #f0f0f0
│   └── padding: 20px
└── h1
    ├── color: #333
    └── font-size: 24px

2.3 合并形成渲染树

  • 将DOM树和CSSOM树合并
  • 只包含可见元素
  • 排除display: none的元素
  • 包含visibility: hidden的元素

3. 布局（Layout/Reflow）

3.1 布局过程

// 布局计算示例
const element = document.querySelector('.box');
const rect = element.getBoundingClientRect();
console.log('位置信息:', rect);
// 输出：{x: 100, y: 200, width: 300, height: 150, top: 200, right: 400, bottom: 350, left: 100}

布局计算包括：

  • 计算每个元素的位置和大小
  • 处理盒模型（margin、border、padding、content）
  • 处理浮动和定位
  • 计算文本换行

3.2 触发重排的情况

// 会触发重排的操作
element.style.width = '200px';        // 改变尺寸
element.style.height = '100px';       // 改变尺寸
element.style.margin = '10px';        // 改变外边距
element.style.padding = '5px';        // 改变内边距
element.style.border = '1px solid';   // 改变边框
element.style.position = 'absolute';  // 改变定位
element.style.display = 'none';       // 改变显示方式

4. 绘制（Paint）

4.1 绘制过程

  • 将渲染树转换为屏幕上的像素
  • 按照层叠顺序绘制
  • 处理颜色、边框、阴影等视觉效果

4.2 触发重绘的情况

// 只触发重绘，不触发重排
element.style.color = 'red';          // 改变颜色
element.style.backgroundColor = 'blue'; // 改变背景色
element.style.borderRadius = '5px';   // 改变圆角
element.style.boxShadow = '0 0 5px';  // 改变阴影
element.style.opacity = '0.5';        // 改变透明度

5. 合成（Composite）

5.1 图层合成

/* 创建新的合成层 */
.element {
    transform: translateZ(0);  /* 硬件加速 */
    will-change: transform;    /* 提示浏览器优化 */
    position: fixed;           /* 固定定位 */
    z-index: 1000;            /* 高层级 */
}

合成层的特点：

  • 独立的绘制层
  • 硬件加速渲染
  • 只影响自己的重绘，不影响其他元素