关于页面 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 ...
随机推荐
- Ubuntu 14.04中Mysql中文乱码问题最小化解决
[client]default-character-set=utf8 [mysqld]default-storage-engine=INNODBcharacter-set-server=utf8col ...
- Bubble Sort_树状数组
Problem Description P is a permutation of the integers from 1 to N(index starting from 1).Here is th ...
- CentOS 7 编译安装 Code::Blocks
CentOS 7 编译安装 Code::Blocks yum install cairo-devel yum install pango-devel yum install atk-devel yum ...
- HTML5实现屏幕手势解锁
HTML5实现屏幕手势解锁(转载) https://github.com/lvming6816077/H5lockHow to use? <script type="text/java ...
- Linux命令--top使用技巧
摘自 http://www.jb51.net/LINUXjishu/151995.html top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用情况,类似于Windows的 ...
- 创建Windows截图工具的快捷方式
日常生活中我们会用到好多截图,一般截图我们用QQ自带截图较多,但许多人都忽视了电脑自带截图功能.在我的电脑-->附件-->截图工具 按照上述方式找截图工具比较繁琐,今天我们可以通过快捷 ...
- web安全之sql注入实例(5.0之前的)
web安全之sql(5.0之前)注入实例 5.0之前的数据库没有information库. 所以这里需要运用的是load_file()函数来获取信息. 1.判断是否有sql注入,用and 1=1 和 ...
- JavaScript对象属性赋值操作的逻辑
对象进行属性赋值操作时,其执行逻辑如下所示: 1. 当前对象中是否有该属性?有,进行赋值操作:没有,进行下一步判断. 2. 对象的原型链中是否有该属性?没有,在当前对象上创建该属性,并赋值:有,进行下 ...
- LEETCODE —— binary tree [Same Tree] && [Maximum Depth of Binary Tree]
Same Tree Given two binary trees, write a function to check if they are equal or not. Two binary tre ...
- lua脚本教程
--[[工具准备 1.一个支持UTF8无BOM编码的工具,例如:notepad++ 2.一个多文件搜索关键字的工具,例如:File Seeker 3.Eluna对应端的源码 ]]-- --[[网站相关 ...