10betcss中repaint和reflow

来源:http://www.chinese-glasses.com 作者:Web前端 人气:61 发布时间:2020-03-14
摘要:时间: 2019-11-20阅读: 89标签: 重绘 原文地址: http://www.cnblogs.com/shenqi0920/p/3545820.html#undefined 最近在看文档的时候 又看到 一篇关于前端优化的文章,说到为了减少页面“回流”应该尽量少

时间: 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

关键词:

最火资讯