回流线系列
产品展示
当前位置 >> 首页 > 产品中心 > 回流线系列

服务热线:0755 28160800
地址:中国 深圳市 宝安区石岩
      街道水田社区第二工业区
业务直线电话:
(86)0755-28160800
(86)0755-29839665
(86)0755-29839692
业务传真:(86)755 2344-2951
前台电话:(86)0755-29839341 
前台传真:(86)755-2983-9345
邮箱:ytsales@www.ecccar.com

Repaint) - SegmentFault 思否
发布时间:2022-01-22 09:54:40 来源:亿百体育 作者:亿百体育官方 [返回]

   

  去遍历渲染,所以当我们的节点发生改变时,浏览器重新渲染部分节点或者全部文档,我们称这个过程为回流

  当我们操作的节点上的元素并不导致元素位置发生变化时,比如color,background-color,visibility(注意虽然节点隐藏了,但是元素还在,并且位置也不会发生变化)

  按照常理也很好理解,因为位置,大小等发生的回流操作相比于仅仅是颜色的变化,带给我们的视觉直观感受来说,回流是比较大的。

  事实上,回流确实比重绘的成本更大,并且有时候并不是只回流一个元素,甚至会带动父元素或者子元素一起回流。

  现代浏览器会对频繁的回流或重绘操作进行优化,浏览器会维护一个队列,当我们页面发生回流或重绘时,有时候并不是立即执行,而是先放入维护的队列中,到达一定时间后统一去进行绘制

  -避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。

  我们把页面文档比作一个积木的话,我们抽离中间或者底部的一个积木块,我们的积木会重新找到重心并且稳固下来,我们把这个过程称之为回流

  或者说,我们简单理解会引起元素位置变化的就会reflow,会引起位置变化的,只是在以前的位置进行改变背景颜色等,只会repaint