关于页面 reflow 和 repaint
什么是 reflow 和 repaint
浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow。
当确定了元素位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为 repaint。
当修改一个元素的外观(例如 outline、visibility、background color 等)但并不影响到元素的布局时,就会发生 repaint。
repaint 是昂贵的,因为浏览器会确认在DOM树中所有其他元素的 visibility 属性。
reflow 更昂贵,因为某个节点reflow时会触发其子节点,甚至包括祖先节点(根据浏览器)和文件中位于该节点以下的其他节点 reflow。由于 reflow 是一种浏览器中的用户拦截(user-blocking)操作,所以了解如何减少 reflow 次数,及不同的文档属性(DOM 层级(DOM depth),CSS 效率,不用类型的 style 变化)对 reflow 次数的影响对开发者来说非常必要。
引发 reflow 的一些因素:
调整窗口大小(Resizing the window)
改变字体大小(Changing the font)
增加或者移除样式表(Adding or removing a stylesheet)
内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input box)
激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))
操作 class 属性(Manipulating the class attribute)
脚本操作 DOM(A script manipulating the DOM)
计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)
设置 style 属性的值 (Setting a property of the style attribute)
未指定图片宽高,载入时会使页面reflow
对于减少 reflow 优化性能的建议:
如果想设定元素的样式,通过改变元素的 class 名 (尽可能在 DOM 树的最里层)(Change classes on the element you wish to style (as low in the dom tree as possible))
因为元素reflow时,会使所有子孙元素都reflow。
避免设置多项内联样式(Avoid setting multiple inline styles)
就像往页面添加元素时,把所有html代码组装成字符串后一次性添加至dom中一样,最好是把所有要修改的样式放在一个类名中,而不是把样式依次添加到元素的内联样式里,因为每次修改内联样式都会触发 reflow。
应用动画的元素,使用 position 属性的 fixed 值或 absolute 值(Apply animations to elements that are position fixed or absolute)
元素脱离正常文档流以后reflow 就不会对文档流内的元素造成影响
权衡平滑和速度(Trade smoothness for speed)
给元素添加动画时,以3个像素为移动单位可能比每次移动1个像素看起来更加平滑,因为每次移动都会触发reflow,过于频繁的reflow会占用更多CPU资源,可能导致动画看起来是卡顿的。
避免使用 table 布局或者将其 table-layout 设置为 fixed(Avoid tables for layout or set table-layout fixed)
在table中,后面添加的元素对其前面元素的布局会产生影响,例如:最后一个单元格的内容过多,使得整列宽度增加。而且对于table的一点点修改都可能造成 table 内所有元素的 reflow。将 table-layout 设置为 fixed 时水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。浏览器在接收到第一行后就可以显示表格,而不用等整个表格加载完并调整好才展示。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。
避免使用CSS表达式 (仅 IE 浏览器)(Avoid expressions in the CSS (IE only))
- 因为每次触发 reflow 都会重新计算表达式
这里介绍一款强大的性能分析工具 dynaTrace,借助该功能能够清晰的得到页面中的资源消耗情况。
参考: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
关于页面 reflow 和 repaint的更多相关文章
- 浏览器渲染页面原理,reflow、repaint及其优化
浏览器的主要组件包括: 1. 用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2. 浏览器引擎 - ...
- reflow和repaint(摘录自张鑫旭的翻译)
//正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布. 第一次让我开始思考关于回流(reflo ...
- 简述reflow和repaint
今天在看面试题的时候遇到reflow和repaint的问题,以前并没有接触过,所以拿来学习一下~ reflow 和 repaint 会拖慢浏览器的速度,而且用户和Web页面都不能在 reflow 和 ...
- 性能优化之reflow和repaint
本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建 ...
- reflow和repaint理解总结
repaint就是重绘,reflow就是回流 严重性: 在性能优先的前提下,reflow的性能消耗要比repaint的大. 体现: repaint是某个dom元素进行重绘,reflow是整个页面进行重 ...
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- Reflow、Repaint 性能优化
涉及到操作大量Dom节点及其样式时,有时感觉画面不顺畅,殊不知浏览器亚历山大了.所以我们心里面一定得清楚 Reflow(回流).Repaint(重绘). 浏览器根据每个Dom节点的样式,包括(大小,颜 ...
- reflow和repaint
Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验 简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都 ...
- reflow和repaint区别?
作者:zccst 重绘和重排之前也知道,但也没有可以详细了解他们的机制,区别,以及对性能的影响. A repaint occurs when changes are made to an elemen ...
随机推荐
- Allegro建立引脚封装概念名词梳理
首先感谢于博士的60讲的Cadence教学视频,老师讲的还是很有耐心,很细致,谢谢! 目前还只是看到建立PCB封装这一块,正好手头上有个案子在做,边做边学的进度还是要好很多.以前的工作对原理图这一块的 ...
- Windows CMD下一些有用的命令
2014.06.27 C:\Users\wsc>route print ============================================================= ...
- Classes
Class Organization Following the standard Java convention, a class should begin with a list of varia ...
- iOS Xcodebuild
简介 xcodebuild 是苹果发布自动构建的工具.它在一个Xcode项目下能构建一个或者多个targets ,也能在一个workspace或者Xcode项目上构建scheme,总的来说,用它没错就 ...
- C#代码示例_定义类
默认情况下,类声明为内部的,即只有当前项目中的代码才能访问它.可以使用internal访问修饰符关键字显示指定. 除了两个访问修饰符关键字(public, internal)外,还可以指定类是抽象的( ...
- 大数据批量插入数据库使用(SqlBulkCopy )效率更高
SqlBulkCopy类是System.Data.SqlClient下的类,我们开发中不常用,甚至不知道有这么一个类的存在,但确实比sql插入,事务批量插入,sql批量拼接插入快很多,比调用存储过程插 ...
- Xml Schema:C#访问在complextype中插入新元素
最近用c#写Xml Schema代码,找了很久也找不到如何在已有的complextype中插入新的element,最后我充分发挥自己的聪明才智,哈哈,终于从...中找到了灵感. XmlSchemaSe ...
- activity 和 生命周期: 消息通信
实际上关于activity大概流程已经了解了,在深入的话方向应该是ams的处理操作和界面创建和view绘制.这些话题之后再谈,activity是一个gui程序,其中离不开的就是消息通讯,也就是在消息循 ...
- colormap
http://cn.mathworks.com/help/matlab/ref/colormap.html
- android setVisibility失效不起作用的问题
原因:不同的布局中有名字相同的控件,所以adapter中填充item的时候,由于控件名字相同没有正确识别你要显示的控件. 解决方法:给其中一个控件改一下名字就行了,超简单.