简述reflow和repaint
今天在看面试题的时候遇到reflow和repaint的问题,以前并没有接触过,所以拿来学习一下~
reflow 和 repaint 会拖慢浏览器的速度,而且用户和Web页面都不能在 reflow 和 repaint 执行时做任何操作和响应
reflow和repaint定义及触发场景
repaint
repaint是重绘,在改变 DOM 元素的视觉效果时触发,即不涉及任何排版布局的问题时触发。
触发场景:
opacity
- text-align/text-decoration
- color/background-color
- :hover
repaint发生后浏览器会去 check 这个DOM元素内的所有节点,所以repaint会影响某个DOM进行重绘。
reflow
reflow是回流,在某一个 DOM 元素的位置发生改变后触发,而且它会重新计算所有元素的位置和在页面中的占有的面积,所以reflow的影响比repaint更大,因为它将会影响它所有的children、ancestors及siblings。所以影响是针对整个页面的,整个页面都需要重新渲染。
触发场景:
使用JS改变DOM元素时会触发reflow,即添加(appendChild)、删除(removeChild)DOM元素或者改变DOM元素的可见性(display:none)
- CSS中width/height/border/margin/padding的改变
CSS3 动画(animation)和过渡(transition),动画的每一frame都会触发reflow
读取元素的某些属性(offsetLeft/Top、offsetHeight/Width、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))时会触发reflow,因为这些属性需要依赖一些元素去计算
:hover 引起的元素表现变化
浏览器大小的改变 (resize)
字体大小改变或更换字体 (font)
更换class样式表
如何尽可能的避免触发reflow和repaint,提高性能?
尽可能的减少DOM元素相互影响
避免设置内联样式
- 尽量简写CSS样式
删除复杂动画,尽量给动画元素设置position:fixed/absolute,使动画元素从DOM流中独立出来,从而减少对其他元素的影响。同时,尽量牺牲平滑度去满足性能,因为动画精度太强,会造成更多次的repaint/reflow
避免使用table进行布局:table的每个元素的大小以及内容的改动,都会导致整个table进行重新计算,造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow
避免在CSS中使用运算式:学习CSS的时候就知道,这个应该避免,不应该加深到这一层再去了解,因为这个的后果确实非常严重,一旦存在动画性的repaint/reflow,那么每一帧动画都会进行计算,性能消耗不容小觑。
- 减少DOM的层级,减少DOM的数量,DOM数量越少越好
- 慎改class!!去改子元素少的DOM的class
- 尽量采取批量更新元素样式的方式,比如可以将需要修改的样式集合放在一个class里,将这个class附给元素
关于性能问题还有很多需要说的,之前在准备面试的时候看到Yahoo总结的一些性能提升的方法,要慢慢积累起来!
最近回学校写毕业论文的空档又复习总结了一些比如闭包啊this指向啊作用域啊之类的js的题,明天继续发博~大家晚安~
简述reflow和repaint的更多相关文章
- reflow和repaint(摘录自张鑫旭的翻译)
//正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布. 第一次让我开始思考关于回流(reflo ...
- 关于页面 reflow 和 repaint
什么是 reflow 和 repaint 浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow. 当确定了元素位置.大小以及其他属性,例如颜 ...
- 性能优化之reflow和repaint
本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建 ...
- reflow和repaint理解总结
repaint就是重绘,reflow就是回流 严重性: 在性能优先的前提下,reflow的性能消耗要比repaint的大. 体现: repaint是某个dom元素进行重绘,reflow是整个页面进行重 ...
- 浏览器渲染页面原理,reflow、repaint及其优化
浏览器的主要组件包括: 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 ...
- reflow 和 repaint
Reflow(渲染):对于DOM结构中的各个元素都有自己的盒模型,浏览器根据各种样式(浏览器的.开发人员定义的等)来计算,并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow. refl ...
随机推荐
- TranslateAnimation 运行动画后实际位置不正确问题
最近在调试android 动画时候发现一个很奇怪问题,网上搜索都说TranslateAnimation 动画运行后,实际位置要在动画结束的监听里面重新设置才会正确,不然物体位置还是在原位. 我根据网上 ...
- WebAPI返回数据类型解惑
本文来自:http://www.cnblogs.com/lzrabbit/archive/2013/03/19/2948522.html 最近开始使用WebAPI,上手很容易,然后有些疑惑 1.Web ...
- C宏展开的几个注意事项
前阵子仔细重新研究了一下C的宏展开.总结起来,有以下几个主要规则: 每次宏展开的结果会被重复扫描,直到没有任何可展开的宏为止. 每展开一个宏,都会记住这次展开,在这个宏展开的结果及其后续展开中,不再对 ...
- Flapper Bird的学习笔记(三)
因为我有一个超屌的梦想,所以就绝不会做一个孬种的追梦人! 完成音效的添加 单例模式 游戏的状态切换 1. 单例模式 首先呢,说一下单例模式.何为单例?单例模式是一种常用的软件设计模式.在它的核心结构中 ...
- iOS开发_数据存储方式
对于数据持久化的问题,博主并不准备在博文内放很多的代码进行更深一步解释,只是简单的介绍一下四种数据持久化,如有时间,会另外针对各个数据持久化的方法进行更进一步的阐述. 直接进入主题: 〈1.NSUse ...
- nginx 模块讲解
1. 通用配置选项: --prefix=<path> 指定Nginx的安装路径,所有其他的路径都要依赖于该选项 --sbin-path=<path> ...
- JavaScript 字符串常用操作
JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...
- openssl
openssl genrsa -des3 -out server.key 1024openssl req -new server.key -out servr.csr seserver-fnamese ...
- CentOS 7 64位的安装流程
若出现以下不支持虚拟机的问题: 表示虚拟机检测到CPU支不支持虚拟化,要去BIOS里设置虚拟化技术设置为enabled:重启电脑-按"F1或Fn+F1"-进入BIOS主界面-移至S ...
- 【67测试20161116】【数论】【DP】【思维】
第一题: LGTB 得到了一个序列,他想在这个序列中选择一个最长的连续子序列,使得这个子序列的最大公约数等于1.请告诉他他能得到的最大长度,如果没有这样的序列,输出-1. 对于50% 的数据,1 &l ...