1在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)就会触发 reflow (回流) 和 repaint (重绘) 会大大影响 web 性能,
2尤其是手机页面。因此我们在页面设计的时候要尽量减少 reflow 和 repaint。
reflow回流
某个子元素样式发生改变,直接影响到了其父元素以及往上追溯很多祖先元素(包括兄弟元素),这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。
现在界面上流行的一些效果,比抽屉、展开(实质上是元素的显示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击…… 只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染,它们都彼此相互影响着。
repaint重绘
只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint(重绘)。repaint 的速度明显快于 reflow,
回流必将引发重绘,重绘不一定引发重绘
发生回流的几种情况
1:改变窗口大小
2:改变文字大小
3:内容的改变,如用户在输入框中敲字
4:激活伪类,如:hover
5:操作 class 属性
6:脚本操作 DOM
7:计算 offsetWidth 和 offsetHeight
8:设置 style 属性等
减少回流有哪些方式呢?
1:不要通过父级来改变子元素样式,最好直接改变子元素样式,改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸
2:尽量通过 class 来设计元素样式,切忌用 style,就是说不通过js操作样式,通过css的style操作样式3尽量不要过多的频繁的去增加,修改,参考博客大佬请走开如果有错误或者不严谨的地方,请留言备注,十分感谢,对作者也是一种鼓励。