Reflow(渲染)和Repaint(重绘)
Reflow(渲染):对于DOM结构中的各个元素都有自己的盒模型,浏览器根据各种样式(浏览器的、开发人员定义的等)来计算,并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。
reflow会影响到dom的结构渲染,同时会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
Repaint(重绘):当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。
repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。
Reflow
的成本比Repaint
的成本高得多的多。但Reflow是不可避免的,只能将Reflow对性能的影响减到最小。
什么情况下会触发浏览器的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))
6.改变字体大小
7.添加、删除样式表
8.内容的改变,如用户在输入框中写字
9.激活伪类
10.设置style属性
如何避免repaint/reflow?
1. 先将元素从document中删除,完成修改后再把元素放回原来的位置
2. 将元素的display设置为”none”,完成修改后再把display修改为原来的值
3. 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);
4. 集中修改样式
(1) 尽可能少的修改元素style上的属性
(2)尽量通过修改className来修改样式
(3)通过cssText属性来设置样式值
element.style.width=”80px”; //reflow
element.style.height=”90px”; //reflow
element.style.border=”solid 1px red”; //reflow
以上就产生多次reflow,调用的越多产生就越多
element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow
(4)缓存Layout属性值
var left=elem.offsetLeft; 多次使用left也就产生一次reflow
(5)设置元素的position为absolute或fixed
元素脱离标准流,也从DOM树结构中脱离出来,在需要reflow时只需要reflow自身与下级元素
(6)尽量不要用table布局
table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
(7)避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)
Reflow(渲染)和Repaint(重绘)的更多相关文章
- 前端性能优化 —— reflow(回流)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- Reflow(回流)和Repaint(重绘) (转)
原文地址:http://blog.csdn.net/qq_18826911/article/details/68924255 首先我们要明白的是,页面的显示过程分为以下几个阶段: 1.生成DOM树(包 ...
- 前端性能优化----reflow(回流)和repaint(重绘)
什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html) reflow:例如某个子元素样式发生改变,直接影响到了其父 ...
- 前端性能优化 —— reflow(回流/重排)和repaint(重绘)
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- 关于repaint(重绘)和reflow( 回流)
repaint就是重绘,reflow就是回流.repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排 严重性: 在性能优先的前提下,性能消耗 reflow大于re ...
- 什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?
什么是回流(重排 reflow)? 回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效, ...
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)
前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...
- 关于重绘and重排
在研究CSS3动画性能的时候,看到了重排两个字. 突然想到自己虽然听说过这么个东东,但一直也没深入研究之. 趁着当下正好有研究的劲头,所以一不做二不休,把这个point也给学习了. 同样是一番查找资料 ...
随机推荐
- WinForm------DockManager控件的使用方法(里面包含DockPanel控件)
1.在"引用"中添加DevExpress.XtraBars和DexExpress.XtraNavBar程序集 2.往工具栏拖出DockManager控件,点击右上角的小三角,再点击 ...
- C#--中实现邮件发送
MailMessage mailmessage = new MailMessage(); mailmessage.To.Add("接受邮箱");//可以添加多个接收邮箱 mailm ...
- clipboard复制剪贴板功能,以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined
zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端,下面 ...
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+pat----------<base>元素有关
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request. ...
- 网络广告术语CPC、CPM和CTR的含义和关系
1. CPC(Cost-per-click):对于广告主来说,就是每次点击(广告)的(付给网站主的)成本:对于媒体(或网站主)来说,就是用户每次点击(广告)(向广告主收取)的费用.可以用公 ...
- webstorm 文件历史找回~ 恢复正确状态~
事情的经过时这样的~ 我写好的HTML 我新下载了sublime text3 用这个打开了下 结果都变乱码了~ 大概截个图 都恢复了 就不瞎搞了 webstorm有错误的记录都有真好~ 恢复的具体操 ...
- phpcms使用细节
1.在模板中使用php语句 <?php for ($i=0; $i < 10; $i++) { echo $i."#######<br>"; }?& ...
- PHP中的ob_start用法详解
用PHP的ob_start();控制您的浏览器cache Output Control 函数可以让你自由控制脚本中数据的输出.它非常地有用,特别是对于:当你想在数据已经输出后,再输出文件头的情况.输出 ...
- SQL查询表字段的信息
如题,代码: select * from information_schema.columns where table_name = 'TableName'
- java获取指定路径下的指定文件/java.io.File.listFiles(FilenameFilter filter)
java.io.File.listFiles(FilenameFilter filter) 返回抽象路径名数组,表示在目录中此抽象路径名表示,满足指定过滤器的文件和目录. 声明 以下是java.io. ...