回流和重绘有什么区别? [英] What's the difference between reflow and repaint?

查看:27
本文介绍了回流和重绘有什么区别?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有点不清楚回流 + 重绘之间的区别(如果有任何区别的话)

I'm a little unclear on the difference between reflow + repaint (if there's any difference at all)

似乎回流可能会改变各种 DOM 元素的位置,其中重绘只是渲染一个新对象.例如.移除元素时会发生回流,更改其颜色时会发生重绘.

Seems like reflow might be shifting the position of various DOM elements, where repaint is just rendering a new object. E.g. reflow would occur when removing an element and repaint would occur when changing its color.

这是真的吗?

推荐答案

这篇文章似乎涵盖了回流与重绘性能问题

This posting seems to cover the reflow vs repaint performance issues

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

至于定义,来自该帖子:

As for definitions, from that post:

进行更改时发生重绘到一个改变的元素皮肤明显,但不影响其布局.

A repaint occurs when changes are made to an elements skin that changes visibly, but do not affect its layout.

这方面的例子包括outline, visibility, background,或 颜色.根据 Opera 的说法,重绘是昂贵,因为浏览器必须验证所有其他人的可见性DOM 树中的节点.

Examples of this include outline, visibility, background, or color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.

回流是对性能更重要因为它涉及到的变化影响部分布局页面(或整个页面).

A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page).

导致回流的示例包括:添加或删除内容,显式或隐式更改widthheightfont-family字体大小等等.

Examples that cause reflows include: adding or removing content, explicitly or implicitly changing width, height, font-family, font-size and more.

http://csstriggers.com

这篇关于回流和重绘有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆