javascript性能优化-repaint和reflow

转载 2016年05月31日 11:46:36
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。


reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。


何时发生:


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)) 


如何避免:


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. 集中修改样式 
  4.1尽可能少的修改元素style上的属性 
  4.2尽量通过修改className来修改样式
  4.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.4缓存Layout属性值 
    var left=elem.offsetLeft; 多次使用left也就产生一次reflow
  4.5设置元素的position为absolute或fixed
    元素脱离标准流,也从DOM树结构中脱离出来,在需要reflow时只需要reflow自身与下级元素
  4.6尽量不要用table布局
    table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
  4.7避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)


参考:


Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》

Repaint/Reflow 的基本认识和优化

​浏览器解析的大概工作流  (1)解析HTML构建DOM树:渲染引擎开始解析HTML文档,转换树中的HTML标签或js生成的标签到DOM节点,它被称为---内容树。 (2)构建渲染树:解析css(...
  • qq_29066959
  • qq_29066959
  • 2016年03月01日 10:09
  • 736

reflow和repaint理解总结

repaint就是重绘,reflow就是回流    严重性:    在性能优先的前提下,reflow的性能消耗要比repaint的大。   体现:   repaint是某个dom元素进行重绘,...
  • lululul123
  • lululul123
  • 2017年01月06日 22:26
  • 1065

reflow(回流)和repaint(重绘)及其优化

为什么不能用CSS通配符 *,CSS选择器层叠为什么不能超过三层,CSS为什么尽量使用类选择器,书写HTML为什么少使用table,为什么结构要尽量简单-DOM树要小…. 对于DOM结构中的各个元素都...
  • ClaireKe
  • ClaireKe
  • 2016年05月11日 19:19
  • 4121

[Web 性能] repaint and reflow (重绘和回流)

在介绍重绘和回流之前, 先看一下HTML 页面呈现的流程。 什么是reflow? reflow指的是计算页面布局。某个节点reflow时会重新计算节点的尺寸和位置,而且还有可能触发其子节点、祖先节点...
  • oscar999
  • oscar999
  • 2016年07月22日 09:04
  • 2123

如何减少浏览器的repaint和reflow

一、什么是repaint/reflow? 页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还...
  • alex8046
  • alex8046
  • 2015年02月15日 13:07
  • 582

关于reflow和repaint

接触前端不久的小白,觉得
  • xjb19901008
  • xjb19901008
  • 2014年05月21日 15:48
  • 931

javascript性能优化-repaint和reflow

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲...
  • mumianhua1003
  • mumianhua1003
  • 2015年05月13日 22:01
  • 77

Web页面Repaint和Reflow

1. Repaint repaint(重绘)是在一个元素的外观被改变,但没有改变布局的情况下发生,如改变visibility、outline、前景色。当repaint发生时,浏览器会验证DOM树上的...
  • borishuai
  • borishuai
  • 2013年03月14日 10:41
  • 2677

关于重绘(repaint)和回流(reflow)的理解

今天谈谈重绘和回流是怎么回事 一、什么是页面的重绘与回流 当页面中的部分或者全部元素改变宽度和高度、或者位置发生变化、删除或者增加某个或者某些元素时、某个元素影藏或者显示时,这时页面就需要重新加载...
  • wxl1555
  • wxl1555
  • 2016年09月29日 20:20
  • 758

Reflow Repaint

Repaint又叫Redraw,重绘,它是指一种不影响当前dom结构的和布局的一种重绘动作。      以下的动作都会促发Repaint: 不可见或可见(visibility);颜色和图片改变...
  • u011144211
  • u011144211
  • 2015年07月07日 11:16
  • 307
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript性能优化-repaint和reflow
举报原因:
原因补充:

(最多只允许输入30个字)