开发者社区> 廊桥梦醉> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

重绘(repaint)、回流(reflow)

简介: 1.什么是重绘(replaint)和回流(relfow) reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程。 repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
+关注继续查看

1.什么是重绘(replaint)和回流(relfow)

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程。

repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。

2.什么会引起回流

笼统来说当页面的布局和几何属性发生变化的时候就会引起回流,具体来说可以分为5类:

1.dom树结构发生变化,比如说删除或者添加某一个node节点。

2.元素几何属性发生变化,包括padding、margin、height、width、border等。

3.页面渲染初始化。

4.获取某些属性。虽然浏览器引擎可能会针对重排做了优化,比如说opera,他会等到有足够的变化发生,或者等到一定时间,或者等一个线程结束,再一起处理,这样就只重绘一次,但是除了render数的直接变化,当获取一些属性时,浏览器为取得正确的值也会触发回流,这样使得浏览器的优化失效了。这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以,在多次使用这些值时应进行缓存。(这段我是直接引用的。。。)

5.浏览器窗口发生变化-resize事件发生时

现在我们大概都能得出的结论是:回流比重绘的代价要高,至于具体的花销跟render树有多少节点需要重新构建有关。

  还有就是,回流一定会伴随着重绘,但是重绘不一定会引起回流。

3.我们要如何避免

上面的实例代码中可以看到一共七行代码引起了6次左右的回流、重绘(上面的代码我大老远从别的页面拿过来当然不只是就用那一次,哈哈),而且我们刚刚还知道了回流花销真是不小,那么浏览器是不是真的每次js语句引起了回流他就执行一下呢?恩,后面的内容我是看的参考资料的:等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

但是尽管浏览器挺机智地帮我们优化了代码,我们自己作死也是没救的,比如你去请求

1. offsetTop, offsetLeft, offsetWidth, offsetHeight

2. scrollTop/Left/Width/Height

3. clientTop/Left/Width/Height

4. width,height

5. 请求了getComputedStyle(), 或者 IE的 currentStyle

浏览器为了给你返回一个比较精确的答案,他会提前flush队列,因为队列中可能会有影响这些值的操作。

所以我们可以做的是: 

1.将那些改变样式的操作集合在一次完事,直接改变className或者cssText

2.让要操作的元素进行离线处理,处理完事以后再一起更新

(1)使用DocumentFragment进行缓存操作,引发一次回流和重绘

课外延伸:

DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。

不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

其实他就是一个游离在DOM树外面的容器,所以你在把它插入文档节点之前,随便给他增删节点都不会引起回流

(2)使用display:none,只引发两次回流和重绘。道理跟上面的一样。因为display:none的元素不会出现在render树

(3)使用cloneNode和replaceChild技术,引发一次回流和重绘(这条其实没太明白)

3.不要经常访问会引起浏览器flush队列的属性,非要高频访问的话建议缓存到变量;

4.将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位;

5.尽量不要使用表格布局,如果没有定宽表格一列的宽度由最宽的一列决定,那么很可能在最后一行的宽度超出之前的列宽,引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【前端工程师手册】学习回流和重绘(reflow和repaint)
【前端工程师手册】学习回流和重绘(reflow和repaint)
15 0
浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
网页生成过程: HTML被HTML解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DOM树和CSSOM树,生成一棵渲染树(Render Tree) 生成布局(flow),即将所有渲染树的所有节点进行平面合成 将布局绘制(paint)在屏幕上 第四步和第五步是最耗时的部分,这两步合起来,就是我们通常所说的渲染。 网上找了一张图片,我加了注释会更直观一些: 渲染: 网页生成的时候,至少会渲染一次。 在用户访问的过程中,还会不断重新渲染 重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。 重排比重绘大: 大,在这个语境里的意思
67 0
.net reflector最新版含注册机
www.rrgod.com/j-software/847.html
403 0
利用Reflector把"闭包"看清楚
今天老赵在园子里发了一篇文章"警惕匿名方法造成的变量共享",立即引起了大家的广泛关注(老赵就是园子的"人气天王",呵呵),而且这个问题园子里也有其它几篇文章做了研究比如"闭包","《你不常用的c#之三》:Action 之怪状 " 如果只是停留在c#2.
747 0
【转自看雪】从reflector实现看.net的混淆与反混淆技术
标 题: 从reflector实现看.net的混淆与反混淆技术【原创】作 者: dreaman时 间: 2006-12-31,13:07链 接: http://bbs.pediy.com/showthread.
1286 0
+关注
廊桥梦醉
对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载