---

一、浏览器页面是怎么生成的？

首先让我们来先了解一下浏览器页面生成的过程

 文字解析：

1）HTML解析器将HTML解析成DOM树

2）CSS解析器将CSS解析成CSSOM树

3)  结合两棵树生成渲染树（Render Tree），该过程称为Attachment

4）浏览器会根据补救方式，在屏幕“画”出渲染器的所有节点

5）然后将布局绘制在屏幕上，显示出整个页面

二、什么是重排和重绘？

我们要知道，当浏览器下载完页面所需的元素之后，会生成两棵树：DOM树和渲染树。

DOM树主要是用来表示页面的DOM结构，而渲染树主要是用来表示页面上如何进行渲染的

当DOM的变化影响到了元素的几何属性，会使浏览器重新计算元素的几何属性，同样，其他几何元素的几何属性也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构建渲染器，这个过程称之为重排。完成重排之后，浏览器会重新绘制受影响的元素，这个过程被称之为重绘。

1.什么时候发生重绘？

1）添加或删除可见的DOM元素

2）元素的位置发生变化

3）元素的尺寸发生变化（包括：内、外边距，边框厚度、高度、宽度等属性发生变化）

4）内容发生变化（内容引起高度变化或者图片被另一个不同尺寸的图片替代）

5）页面渲染器进行初始化

6）浏览器窗口尺寸发生改变

2.如何优化重排效率？

1）减少重排范围

尽量以局部布局的形式组织HTML结构，尽可能小的影响重排的范围（BFC）

不使用table布局，在table中可能很小的一个改动会造成整个table的重新布局

2）减少重排次数

样式集中改变

分离度写操作

将要修改的元素离线操作