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

1. 浏览器渲染机制

  • 浏览器采用流式布局模型(Flow Based Layout
  • 浏览器会把HTML解析成DOM,把CSS解析成CSSOMDOMCSSOM合并就产生了渲染树(Render Tree)。
  • 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。
  • 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table布局的原因之一。

2. 重绘

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘,例如outlinevisibilitycolorbackground-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。

3. 回流

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

<body>
<div class="error">
    <h4>我的组件</h4>
    <p><strong>错误:</strong>错误的描述…</p>
    <h5>错误纠正</h5>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
</div>
</body>

在上面的HTML片段中,对该段落p标签回流将会引发强烈的回流,因为它是一个子节点。这也导致了祖先的回流。此外,<h5>和<ol>也会有简单的回流,因为其在DOM中的回流元素之后。大部分的回流将导致页面的重新渲染。

回流必定会发生重绘,重绘不一定会引发回流。

4.浏览器优化

应该避免频繁使用以下属性,它们都会强制渲染刷新队列。

  • offsetTop,offsetLeft,offsetWidth,offsetHeight
  • scrollTop,scrollLeft,scrollWidth,scrollHeight
  • clientTop,clientLeft,clientWidth,clientHeight
  • width,height
  • getComputedStyle()
  • getBoundingClientRect()

5.减少重绘和回流

1.CSS

  • 使用transform替代top
  • 使用visibility替换display:none,因为前者只会引起重绘,后者会引发回流(改变了布局)
  • 避免使用table布局,可能很小的一个改动会造成整个table的重新布局
  • 尽可能在DOM树的最末端改变class,回流是不可避免的,但可以减少其影响。尽可能在DOM树的最末端改变class,可以限制了回流的范围。
  • 避免设置多层内联样式,css选择符从右往左匹配查找,避免节点层级过多。
  • 将动画效果应用到position属性为absolute或者fixed的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流。同时,控制动画速度可以选择requestAnimationFrame。
  • 避免使用css表达式,可能会引发回流。
  • 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点,例如will-change,video,iframe等标签,浏览器会自动将该节点变为图层。
  • CSS3硬件加速(GPU加速),使用CSS3硬件加速,可以让transform,opacity,filters这些动画不会引起回流重绘。

2.JavaScript

避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性

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

避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。

对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

参考文章:https://github.com/sisterAn/blog/issues/33

原文地址:https://www.cnblogs.com/cathy1024/p/11378753.html

时间: 2024-10-07 05:41:30

关于重绘和回流(Repaint & Reflow)的相关文章

理解浏览器的重绘与回流(repaint&amp;&amp;reflow)

今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下: 一.  浏览器渲染过程 渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程 浏览器解析HTML的基本过程: 1  用户输入网址,浏览器向服务器发出请求,服务器返回html文件 2  浏览器载入html代码,发现标签内有一个标签引用外部css文件 3 浏览

闲聊前端性能----防抖、节流、重绘与回流。

在最近,小米9卖的特别火,在官方抢购的时候基本都是一点既空.这不禁让我想到了,官网是怎样控制顾客不停点击发起请求而不导致官网崩溃的呢?这由此引出了前端性能的优化中的----防抖和节流.在闲聊完后你就会发现有些时候在抢购商品的时候,你用鼠标在几秒钟不停的按了数十次,或许它仅仅是发送了你第一次点击抢购的那个请求.所以说 抢购时间内的第一次点击尤为关键! 下面来介绍一下什么是防抖!        防抖:任务频繁触发的情况下,只有任务触发的间隔超过制定的时间间隔的时候,任务才会被执行. 下面引用一下知乎

浅谈JS重绘与回流

在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要 UI 层面的重新像素绘制,因此损耗较少. 常见的重绘操作有: 改变元素颜色 改变元素背景色 more …… 回流(reflow):又叫重排(layout).当元素的尺寸.结构或者触发某些属性时,浏览器会重新渲染页面,称为回流.此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因

页面的重绘与回流及优化

首先要清楚页面呈现的具体过程: 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象.DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而FF会去掉_开头的样式. 3.DOM Tree 和样式结构体组合后构建ren

页面重绘和回流以及优化

在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象.DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 2. 浏览器把所有样式(用户定义的CSS和用户代

重绘、回流

重绘:对某个区域.对象的重新渲染表现 回流:对某个区域.对象进行重绘,根据条件影响到它的祖先对象进入重绘(并可能无限递归直到顶级祖先对象) 重绘如何出现:改变对象的形状.坐标.表现以及内容都会引发该对象被重新渲染,这种现象即为重绘. 回流如何出现:当该对象即将重绘时,浏览器会根据条件判断该对象的重绘结果是否会依赖该对象的祖先元素.如果有则将该对象祖先元素也加入本次重绘.并一直向上寻找,直到条件不匹配.此现象即为回流. 最后总结:1.重绘可能引发回流2.回流必定引发重绘3.回流条件……暂时未知

重绘和回流

1.浏览器把获取到的html代码解析成1个Dom树. 2.浏览器把样式解析成样式结构体,在解析过程中会去掉各自浏览器不能识别的样式比如-moz,-webkit等. 3.2者结合后构建呈现render tree. 4.render tree构建完毕,浏览器就可以根据render tree绘制页面. 其中脚本执行过程可能阻塞Dom的解析和构建和阻塞css处理,(比如遇到同步一个document.write或者javascript脚本查询任何元素的计算样式).结果导致Dom和CssDom的构建频繁的交

css重绘与回流

高性能WEB开发之页面呈现.重绘.回流(1) 2011-04-25 10:11 BearRui BearRui的Blog 字号:T | T 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. AD:2014WOT全球软件技术峰会北京站 课程视频发布 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到

网页的重绘和回流

闭包 function f1(){         var n=999;         nAdd=function(){n+=1}         function f2(){             alert(n);         }         return f2;     } var result=f1();     result();     nAdd();     result(); 其中的结果是: 第1次弹出999 第2次弹出10 第一次运行的时候,f2直接显示出n的值,第