# 重绘回流过程
## 1. 浏览器的渲染过程，DOM 树和渲染树的区别？

![xuanran.png](../../img/xuanran.png)

1. HTML 经过解析生成 DOM树； CSS经过解析生成　Style Rules。 二者一结合生成了Render Tree。
2. 通过layout计算出DOM要显示的宽高、位置、颜色。
3. 最后渲染在界面上，用户就看到了

## 2. 浏览器的渲染过程
1. 解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
2. CSS 文件下载完成，开始构建 CSSOM(CSS 树)
3. CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
4. 布局(Layout)：计算出每个节点在屏幕中的位置
5. 显示(Painting)：通过显卡把页面画到屏幕上

## 3. DOM 树 和 渲染树 的区别?
1. DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
2. 渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性

## 4. CSS会阻塞DOM解析吗？

1. 对于一个HTML文档来说，不管是内联还是外链的css，都会阻碍后续的dom渲染，但是不会阻碍后续dom的解析。

2. 当css文件放在`<head>`中时，虽然css解析也会阻塞后续dom的渲染，但是在解析css的同时也在解析dom，所以等到css解析完毕就会逐步的渲染页面了。

## 5. 重绘和回流（重排）的区别和关系？

1. 重绘：当渲染树中的元素**外观**（如：颜色）发生改变，不影响布局时，产生重绘
2. 回流：当渲染树中的元素的**布局**（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
3. 注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值
4. 回流必将引起重绘，而重绘不一定会引起回流


### 5.1 触发reflow
1. width/height/border/margin/padding的修改，如width=778px；
2. 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
3. appendChild等DOM元素操作；
4. font类style的修改；
5. background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
6. scroll页面，这个不可避免；
7. resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
8. 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；


### 5.2 触发repaint
1. color的修改，如color=#ddd；
2. text-align的修改，如text-align=center；
3. a:hover也会造成重绘。
4. :hover引起的颜色等不导致页面回流的style变动。


## 6. 如何最小化重绘(repaint)和回流(reflow)？
### 6.1 性能问题
以下操作会导致性能问题：
1. 改变 window 大小
2. 改变字体
3. 添加或删除样式
4. 文字改变
5. 定位或者浮动
6. 盒模型

### 3.2 解决方法
1. 需要要对DOM元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
2. 需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document，或使用字符串拼接方式构建好对应HTML后再使用innerHTML来修改页面
3. 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
4. 避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
5. 避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
6. 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
7. 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx


【性能优化】重绘回流

1. 浏览器的渲染过程，DOM 树和渲染树的区别？

5. 重绘和回流（重排）的区别和关系？

6. 如何最小化重绘(repaint)和回流(reflow)？