简述reflow和repaint

15 篇文章 2 订阅

一般,在页面开发时,不可避免地会发生repaint和reflow,除非是静态页面。从字面上理解repaint,它表示“重绘”,而reflow则是“回流”。他们的目的都是表现出新的页面样貌。

一、repaint重绘

repaint一般在改变 DOM 元素的视觉效果时触发,即不涉及任何排版布局的问题时触发,它主要针对的是某一dom元素的重新绘制。一般触发repaint的常见场景有以下几个:

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

二、reflow回流

reflow回流是在某一个 DOM 元素的位置发生改变后触发,而且它会重新计算所有dom元素的位置和在页面中的占有的面积,所以一般来说,reflow的影响比repaint要大得多,它将会影响它所有的children、ancestors及siblings。所以影响是针对整个页面的,整个页面都需要重新渲染。一般触发reflow的常见场景有以下几个:

  • 使用JS改变DOM元素时会触发reflow,即添加(appendChild)、删除(removeChild)DOM元素或者改变DOM元素的可见性(display:none)
  • CSS中width/height/border/margin/padding的修改,如width=778px;
  • CSS3 动画(animation)和过渡(transition),动画的每一frame都会触发reflow;
  • 读取元素的某些属性(offsetLeft/Top、offsetHeight/Width、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))时会触发reflow,因为这些属性需要依赖一些元素去计算;
  • :hover等伪类引起的元素表现改动造成页面回流;
  • scroll页面,这个不可避免;
  • 字体大小改变或更换字体   (font);
  • resize页面,桌面版本的进行浏览器大小的缩放;等等。

三、性能优化

从上面两点我们知道,reflow的影响是针对所有的元素,而repaint针对触发视觉变化的元素,可以知道reflow的性能消耗要比repaint要大很多,那我们要如何尽可能避免触发reflow和repaint,提高性能?可以从以下几点考虑

  • 尽可能的减少DOM元素相互影响

  • 避免设置内联样式

  • 尽量简写CSS样式
  • 删除复杂动画,尽量给动画元素设置position:fixed/absolute,使动画元素从DOM流中独立出来,从而减少对其他元素的影响。同时,尽量牺牲平滑度去满足性能,因为动画精度太强,会造成更多次的repaint/reflow

  • 避免使用table进行布局:table的每个元素的大小以及内容的改动,都会导致整个table进行重新计算,造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow

  • 避免在CSS中使用运算式:学习CSS的时候就知道,这个应该避免,不应该加深到这一层再去了解,因为这个的后果确实非常严重,一旦存在动画性的repaint/reflow,那么每一帧动画都会进行计算,性能消耗不容小觑。

  • 减少DOM的层级,减少DOM的数量,DOM数量越少越好
  • 慎改class!!去改子元素少的DOM的class
  • 尽量采取批量更新元素样式的方式,比如可以将需要修改的样式集合放在一个class里,将这个class附给元素。

 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值