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?》

相关文章推荐

javascript性能优化-repaint和reflow

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲...

浏览器的repaint reflow对性能的影响

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

CSS Repaint and Reflow 及其优化

CSS Repaint and Reflow 基本认识及其优化1. 什么是Repaint/Reflow?浏览器解析的大概工作流程如图所示,可以归纳为四个步骤: 1、解析HTML以构建DOM树:渲染...

[ 浏览器原理 ] Repaint 、Reflow 的基本认识和优化

你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *,CSS选择器层叠不能超过三层,CSS尽量使用类选择器,书写HTML少使用table,结构要尽量简单-DOM树要小....等这些忠告,以前我就大...
  • offbye
  • offbye
  • 2015年03月31日 14:28
  • 742

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

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

如何减少浏览器repaint和reflow ?

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

重绘与回流(repaint和reflow)

reflow:回流 回流:指计算页面布局。render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流,每个页面至少需要一次回流,就是在页面第一次加载的...

减少页面回流与重绘(Reflow & Repaint)

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘。 回流(Reflow)是指布局引擎为frame计算图形的过程...
  • yangjvn
  • yangjvn
  • 2015年08月31日 09:38
  • 2797

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

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

关于Repaint(重绘)与Reflow(回流)

关于回流和重绘在刚开始学习前端时一般不会太在意,因为其影响的大多是运行时的性能问题。 显然,频繁地进行回流和重绘会导致运行性能的下降,所以,在要求性能的时候,往往要注意减少页面的回流和重绘。概念re...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript性能优化-repaint和reflow
举报原因:
原因补充:

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