什么是 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 的一些因素:

  1. 调整窗口大小(Resizing the window)

  2. 改变字体大小(Changing the font)

  3. 增加或者移除样式表(Adding or removing a stylesheet)

  4. 内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input box)

  5. 激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))

  6. 操作 class 属性(Manipulating the class attribute)

  7. 脚本操作 DOM(A script manipulating the DOM)

  8. 计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)

  9. 设置 style 属性的值 (Setting a property of the style attribute)

  10. 未指定图片宽高,载入时会使页面reflow

对于减少 reflow 优化性能的建议:

  1. 如果想设定元素的样式,通过改变元素的 class 名 (尽可能在 DOM 树的最里层)(Change classes on the element you wish to style (as low in the dom tree as possible))

    • 因为元素reflow时,会使所有子孙元素都reflow。

  2. 避免设置多项内联样式(Avoid setting multiple inline styles)

    • 就像往页面添加元素时,把所有html代码组装成字符串后一次性添加至dom中一样,最好是把所有要修改的样式放在一个类名中,而不是把样式依次添加到元素的内联样式里,因为每次修改内联样式都会触发 reflow。

  3. 应用动画的元素,使用 position 属性的 fixed 值或 absolute 值(Apply animations to elements that are position fixed or absolute)

    • 元素脱离正常文档流以后reflow 就不会对文档流内的元素造成影响

  4. 权衡平滑和速度(Trade smoothness for speed)

    • 给元素添加动画时,以3个像素为移动单位可能比每次移动1个像素看起来更加平滑,因为每次移动都会触发reflow,过于频繁的reflow会占用更多CPU资源,可能导致动画看起来是卡顿的。

  5. 避免使用 table 布局或者将其 table-layout 设置为 fixed(Avoid tables for layout or set table-layout fixed)

    • 在table中,后面添加的元素对其前面元素的布局会产生影响,例如:最后一个单元格的内容过多,使得整列宽度增加。而且对于table的一点点修改都可能造成 table 内所有元素的 reflow。将 table-layout 设置为 fixed 时水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。浏览器在接收到第一行后就可以显示表格,而不用等整个表格加载完并调整好才展示。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。

  6. 避免使用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的更多相关文章

  1. 浏览器渲染页面原理,reflow、repaint及其优化

    浏览器的主要组件包括: 1.      用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2.      浏览器引擎 - ...

  2. reflow和repaint(摘录自张鑫旭的翻译)

    //正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布. 第一次让我开始思考关于回流(reflo ...

  3. 简述reflow和repaint

    今天在看面试题的时候遇到reflow和repaint的问题,以前并没有接触过,所以拿来学习一下~ reflow 和 repaint 会拖慢浏览器的速度,而且用户和Web页面都不能在 reflow 和 ...

  4. 性能优化之reflow和repaint

    本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建 ...

  5. reflow和repaint理解总结

    repaint就是重绘,reflow就是回流 严重性: 在性能优先的前提下,reflow的性能消耗要比repaint的大. 体现: repaint是某个dom元素进行重绘,reflow是整个页面进行重 ...

  6. 页面重绘(repaint)和回流(reflow)

    前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...

  7. Reflow、Repaint 性能优化

    涉及到操作大量Dom节点及其样式时,有时感觉画面不顺畅,殊不知浏览器亚历山大了.所以我们心里面一定得清楚 Reflow(回流).Repaint(重绘). 浏览器根据每个Dom节点的样式,包括(大小,颜 ...

  8. reflow和repaint

    Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验 简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都 ...

  9. reflow和repaint区别?

    作者:zccst 重绘和重排之前也知道,但也没有可以详细了解他们的机制,区别,以及对性能的影响. A repaint occurs when changes are made to an elemen ...

随机推荐

  1. Hyper-V下安装Ossim系统

    WindowsServer2008Hyper-V下安装Ossim系统 背景:很多朋友在用Hyper-v安装Linux的时候总是抱怨速度很慢,而且装好了系统无法识别网卡,可实际上针对网卡的问题本文提出了 ...

  2. JQuery事件的绑定

    关于jQuery事件绑定html: <a href="#" onclick="addBtn()">addBtn</a> <div ...

  3. Http报文格式学习及Get和Post主要区别总结

    HTTP(HyperText Transport Protocol,超文本传送协议) http请求数据包的格式:头部(request line + header)+  数据(data) 头部和数据包体 ...

  4. delphi 对抗任务管理器关闭(提升进程到Debug模式,然后设置进程信息SE_PROC_INFO)

    [delphi] view plain copy program Project1; uses Windows; {$R *.res} function MakeMeCritical(Yes: Boo ...

  5. 使用socket实现的ftp文件传输服务器

    服务端: # encoding:utf-8 # Author:"richie" # Date:8/23/2017 from socket import * import pickl ...

  6. 【Nginx系列】Nginx编译与安装

    Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器.Nginx是由Igor Sysoev为俄罗斯访问第二的Rambler.ru站点开发的. 一.Nginx ...

  7. map和unordered_map的差别和使用

    map和unordered_map的差别还不知道或者搞不清unordered_map和map是什么的,请见:http://blog.csdn.net/billcyj/article/details/7 ...

  8. C语言面试笔记(8/26)

    在32位的机器环境下,char.short.int.float.double这样的内置数据类型sizeof值的大小分别为1,2,4,4,8: C++标模板库(standard Template Lib ...

  9. 在centos上搭建JavaWeb环境(jdk+mysql+tomcat)

    1.安装OpenJDK yum list java* -openjdk* -y java -version 2.安装Tomcat cd /usr/local wget https://mc.qclou ...

  10. Android Studio SVN配置

    一 . 原文链接:忽略文件[转]    https://blog.csdn.net/buaaroid/article/details/51546521 1.用Android Studio创建一个项目, ...