repaint和reflow的相关知识
一个页面由两部分组成:
DOM:描述该页面的结构
render渲染:描述 DOM 节点 (nodes) 在页面上如何呈现
repaint重绘: 当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
reflow回流 : 如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
最近了解了下repaint和reflow的相关知识,觉得在页面重构过程中就应该考虑前端开发(js)人员对dom进行操作,能够减轻客户浏览器的鸭梨。在这里整理了一下相关资料,推荐看帖子底部的文章,如果觉得排版不够好请移步我的博客围观。这是一个讨论帖,抛砖引玉,大家说说自己工作中的经验~
1. 什么是 repaint 和 reflow?
一个页面由两部分组成:
DOM:描述该页面的结构
render:描述 DOM 节点 (nodes) 在页面上如何呈现
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.
页面渲染的过程如下:
1.解析HTML代码并生成一个 DOM 树。
2.解析CSS文件,顺序为:浏览器默认样式->自定义样式->页面内的样式。
3.生成一个渲染树(render tree)。这个渲染树和DOM树的不同之处在于,它是受样式影响的。它不包括那些不可见的节点。
4.当渲染树生成之后,浏览器就会在屏幕上“画”出所有渲染树中的节点。
2. 什么情况下会触发浏览器的repaint/reflow?
除了页面在首次加载时必然要经历该过程之外,还有以下行为会触发这个行为:
引用:
1. DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
2. 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
3. 应用新的样式或者修改任何影响元素外观的属性
4. Resize浏览器窗口、滚动页面
5. 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
3. 怎么优化?
1. 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种:
引用:
1. 先将元素从document中删除,完成修改后再把元素放回原来的位置
2. 将元素的display设置为”none”,完成修改后再把display修改为原来的值
3. 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document
2. 集中修改样式
引用:
1. 尽可能少的修改元素style上的属性
2. 尽量通过修改className来修改样式
3. 通过cssText属性来设置样式值
3. 缓存Layout属性值
引用:
对于Layout属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。
4. 设置元素的position为absolute或fixed
引用:
在元素的position为static和relative时,元素处于DOM树结构当中,当对元素的某个操作需要重新渲染时,浏览器会渲染整个页 面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素 以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的Javascript动画方面尤其值得考虑。
5. 权衡速度的平滑
引用:
比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
6. 不要用tables布局
引用:
不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
7. 不要在css里面写expression
引用:
很多情况下都会触发reflow,如果css里有expression,每次都会重新计算一遍
参考文章:
1. 如何减少浏览器repaint和reflow
2. Repaint, reflow/relayout, restyle
3. Reflows & Repaints: CSS Performance making your JavaScript slow?
4. Repaint 跟踪浏览器的渲染[如果你的FF是3.5beta+监听网页的重绘情况]
repaint和reflow的相关知识的更多相关文章
- 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- 移动WEB像素相关知识
了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...
- listener监听器的相关知识
从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...
- UIViewController相关知识
title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...
- 【转】java NIO 相关知识
原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...
- javascript性能优化-repaint和reflow
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...
- NSString使用stringWithFormat拼接的相关知识
NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ...
- iOS网络相关知识总结
iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...
- 电路相关知识--读<<继电器是如何成为CPU的>>
电路相关知识–读<<继电器是如何成为CPU的>> */--> *///--> *///--> 电路相关知识–读<<继电器是如何成为CPU的> ...
随机推荐
- vim 代码注释插件
参考: 1.http://www.vim.org/scripts/script.php?script_id=1218 2.http://www.dutor.net/index.php/2010/05/ ...
- vb6转16进制
Public Function xEncode(ByVal strEncode As String) As String If strEncode <> "" Then ...
- Asp.Net生命周期和Http管道技术
本篇主要介绍一下内容: 1.ASP.NET生命周期 2.Http运行时 3.Http管道技术 a)inetinfo.exe b)asp.net_isapi.dll c)aspnet_wp.exe d) ...
- macOS中Vim基本配置,颜色主题/语法/indent设置
macOS中Vim基本配置 Vim的初始化配置 .vimrc 存放位置 macOS 环境下 vim 的初始化配置文件为 .vimrc , 通常有两个(系统版本和用户版本),一个位于 /usr/shar ...
- stl之list双向链表容器应用基础
不同于採用线性表顺序存储结构的vector和deque容器.list双向链表中任一位置的元素差值.插入和删除,都具有高效的常数阶算法时间复杂度O(1). 头文件 #include<list> ...
- wireshark----教你怎样抓包
wireshark----教你怎样抓包 wireshark是一款强大的抓包工具,走过路过一定不要错过就是了,当你学习TCP/IP协议的时候,学习使用wireshark抓包正是理论联系实际最好的方法,先 ...
- fedora25 采用二进制包安装mysql5.5.49
#添加用户和组 groupadd mysql useradd -s /sbin/nologin -g mysql -M mysql /etc/passwd id mysql #安装依赖包 [root@ ...
- Windows下pip安装scipy报错no lapack/blas resources found
Windows下升级了pandas,但是发现scipy包随后引用出错,后来确认需重新安装scipy, 在用pip安装scipy出现no lapack/blas resources found的错误. ...
- 【千纸诗书】—— PHP/MySQL二手书网站后台开发之功能实现
前言:前一篇温习了网站开发需要掌握的基础知识,这一篇重点梳理一下各个功能模块的[详细设计与实现].项目github地址:https://github.com/66Web/php_book_store, ...
- 在OpenErp的配置文件中为数据库密码加密
openerp连接数据库的用户名和密码可以命令行给出, 也可以设置在配置文件中, 如下例所示: db_user = openerp db_password = laoliu 因为它使用了明文的密码 ...