浏览器渲染页面/reflow repaint

Posted zhoujingye

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器渲染页面/reflow repaint相关的知识,希望对你有一定的参考价值。

 影响页面渲染速度主要有:reflow(回流)和repaint(重绘) 

 reflow(回流):

页面为什么会慢?那是因为浏览器要花时间、花精力去渲染,尤其是当它发现某个部分发生了点变化影响了布局,需要倒回去重新渲染, 该过程称为reflow(回流)。reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲染,通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

 

repaint(重绘):

如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint(重绘)。

repaint 的速度明显快于 reflow(在IE下需要换一下说法,reflow 要比 repaint 更缓慢)。

 

尽量避免reflow(回流)                

 reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow,都会导致它的子结点及祖先结点重新渲染。

在哪些情况下会导致reflow发生:

    1. 改变窗囗大小
    2. 改变文字大小
    3. 添加/删除样式表
    4. 内容的改变,如用户在输入框中敲字
    5. 激活伪类,如:hover (IE里是一个兄弟结点的伪类被激活)
    6. 操作class属性
    7. 脚本操作DOM
    8. 计算offsetWidth和offsetHeight
    9. 设置style属性

 reflow是不可避免的,只能将reflow对性能的影响减到最小。

    1. 尽可能限制reflow的影响范围。需要改变元素的样式,不要通过父级元素影响子元素。最好直接加在子元素上。
    2. 通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式。
  • 实现元素的动画,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局。
  • 权衡速度的平滑。比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
  • 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。
  • 很多情况下都会触发reflow,如果css里有expression,每次都会重新计算一遍。
  • 减少不必要的 DOM 层级(DOM depth)。改变 DOM 树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
  • 避免不必要的复杂的 CSS 选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的 CPU

来源:https://www.cnblogs.com/Peng2014/p/4687218.html

以上是关于浏览器渲染页面/reflow repaint的主要内容,如果未能解决你的问题,请参考以下文章

reflow 和 repaint

css reflow和repaint

前端性能优化 —— reflow(回流)和repaint(重绘)

关于重绘和回流(Repaint & Reflow)

根据浏览器渲染引擎工作原理(reflow/repaint),来优化DOM的操作

性能优化之reflow和repaint