时间: 2019-11-20阅读: 89标签: 重绘
原文地址:http://www.cnblogs.com/shenqi0920/p/3545820.html#undefined
最近在看文档的时候 又看到 一篇关于前端优化的文章,说到
为了减少页面“回流”应该尽量少用“reflow”,然后就一脸懵逼。不知道说的是什么。还有与之对应的
另外一个“repaint--重绘”;为了,让自己深刻的理解,故 做一下备份。
简单理解:
10bet,前言:
页面设计中,不可避免的需要浏览器进行repaint和reflow。那到底什么是repaint和reflow呢。下面谈谈自己对repaint和reflow的理解,以及结合其他技术牛的讲解,谈谈如何优化repaint和reflow。
repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排。字面意思来说:repaint就是重绘,reflow就是回流。repaint和reflow的目的是:展示一个新的页面样貌。
初步介绍:
开发一个页面时,不可避免的需要进行repaint和reflow。也就只有古来的静态页面才会不存在repaint和reflow。repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排。字面意思来说:repaint就是重绘,reflow就是回流。repaint和reflow的目的是:展示一个新的页面样貌。
性能消耗:
严重性:
在性能优先的前提下,性能消耗 reflow大于repaint。
在性能优先的前提下,性能消耗 reflow大于repaint。
体现:
repaint是某个DOM元素进行重绘;reflow是整个页面进行重排,也就是页面所有DOM元素渲染。
体现:
如何触发:
style变动造成repaint和reflow。
不涉及任何DOM元素的排版问题的变动为repaint,例如元素的color/text-align/text-decoration等等属性的变动。
除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。
repaint是某个DOM元素进行重绘;reflow是整个页面进行重排,也就是页面所有DOM元素渲染。
常见触发场景:
触发repaint:color的修改,如color=#ddd;
text-align的修改,如text-align=center;
a:hover也会造成重绘。
:hover引起的颜色等不导致页面回流的style变动。
等等太多,一时间写出来也太难想了。
本文由10bet发布于Web前端,转载请注明出处:10betcss中repaint和reflow
关键词: