时间: 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
关键词：