浏览器渲染页面机制默认采用的是流式布局模型（Flow Based Layout），从上到下，从左到右，直到页面渲染完成；当CSS或js动态修改了DOM的样式之后，或页面引入样式表之后，就会引起页面回流（Reflow），换句话说就是页面DOM重新排列了，又称重排！

所谓重排，实际上是根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息（DOM对象的位置和尺寸大小），并将其安置在界面中的正确位置。

哪些操作会触发重排？

1. 页面首次渲染；
2. 浏览器窗口大小发生改变；
3. 元素尺寸或位置发生改变；
4. 元素内容变化（文字数量或图片大小等等）；
5. 元素字体大小变化；
6. 添加或者删除可见的DOM元素；
7. 激活CSS伪类（例如：:hover）；
8. 设置style属性

js触发重排的方法：

width
height
margin
display
border
position
clientWidth
clientHeight
clientTop
offsetWidth
offsetHeight
offsetTop
scrollWidth
scrollHeight
scrollTop
scrollIntoView()
scrollTo()
getComputedStyle()
getBoundingClientRect()
scrollIntoViewIfNeeded()