浏览器相关面试题

1. 介绍下重绘和重排（repaint & reflow），以及如何进行优化

参考答案：

整个页面可以看做是一幅画，这幅画是由浏览器绘制出来的，浏览器绘制这幅画的过程称之为渲染。

渲染是一件复杂的工作，它大致分为以下几个过程：

1. 解析 HTML，生成 DOM 树，解析 CSS，生成样式规则树
2. 将 DOM 树和样式规则树结合，生成渲染树(Render Tree)
3. 根据生成的渲染树，确定元素的布局信息（元素的尺寸、位置），这一步称之为 reflow，译作重排或回流
4. 根据渲染树和布局信息，生成元素的像素信息（元素横纵的像素点，左上角的偏移量、每个像素的颜色等）。这一步称之为 repaint，译作重绘
5. 将像素信息提交到 GPU 完成屏幕绘制

当元素的布局信息发生变化时，会导致重排。

当元素的像素信息发生变化时，会导致重绘。

重排一定会导致重绘，因此布局信息的变化一定会导致像素信息的变化。

在实际开发中，获取和设置元素尺寸、位置均会导致重排和重绘，而仅设置元素的外观（比如背景颜色）则只会导致重绘，不会导致重排。

重排是一项繁琐的工作，会降低效率，因此在开发中，应该尽量避免直接获取和设置元素的尺寸、位置，尽量使用变量来保存元素的布局信息。