浏览器渲染页面机制默认采用的是流式布局模型(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()