前端渲染回流与重排问题以及优化方案

---

前言

今天一起看一下浏览器是如何渲染页面的，并看一下修改代码会对页面渲染带来的影响，带着问题一起寻找优化的方案~

---

一、浏览器是如何进行界面渲染的？

不同的渲染引擎的具体做法稍有差异，但是大体流程都是差不多的，下面以 chrome渲染引擎 的 渲染流程来说明：

上图展示的流程是：

1. 获取 HTML ⽂件并进⾏解析，生成一棵 DOM 树（DOM Tree）

2. 解析 HTML 的同时也会解析 CSS，⽣成样式规则（Style Rules）

3. 根据 DOM 树和样式规则，生成一棵渲染树（Render Tree）

4. 进行布局（Layout）(重排)，即为每个节点分配⼀个在屏幕上应显示的确切坐标位置

5. 进⾏绘制（Paint）(重绘)，遍历渲染树节点，调⽤ GPU(图形处理器) 将元素呈现出来

二、重绘(repaint)和重排(回流reflow)是什么?

<