回流和重绘

渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。

页面生成以后，脚本操作和样式表操作，都会触发“回流”（reflow）和“重绘”（repaint）。

什么是回流和重绘

回流：当节点树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建

重绘：当节点数中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的

温馨提示

回流和重绘并不一定一起发生，回流必然导致重绘，重绘不一定需要回流。比如改变元素颜色，只会导致重绘，而不会导致回流；改变元素的布局，则会导致重绘和回流

什么时候会造成回流和重绘

回流

1. 页面初始加载
2. 改变字体，元素尺寸（width，height，border，position），改变元素内容
3. 添加或删除元素，如果元素本身被display:none会回流，visibility:hidden则会发生重绘
4. 定位为fixed的元素，滚动条拖动时会回流
5. 调整窗口大小

重绘

优化技巧

1. 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点
2. 缓存 DOM 信息
3. 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式
4. 使用documentFragment操作 DOM
5. 动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响
6. 只在必要时才显示隐藏元素
7. 使用虚拟DOM（virtual DOM）库

​x
// 引发两次回流
box.style.top = '100px';
console.log(box.style.top);//=>'100px'
box.style.left = '100px';

// 引发一次回流
box.style.top = '100px';
box.style.left = '100px';
console.log(box.style.top);//=>'100px'

实时效果反馈

1. 以下那个操作会造成回流：

A 改变元素背景颜色

B 添加动态元素

C 增加元素圆角效果

D 改变元素字体颜色

答案

1=>B