javascript性能优化-repaint和reflow

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相关推荐

javascript性能优化
2019独角兽企业重金招聘Python工程师标准>>> 很久就想总结一下关于javascript性能优化方面的一些东西,平时也有注意收集这方面的资料.把del.icio.us里的收藏 ...
JavaScript中的Repaint和Reflow
开发一个页面时,不可避免的需要进行repaint和reflow.也就只有以前的静态页面才会不存在repaint和reflow.repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流, ...
DOM性能瓶颈与Javascript性能优化
这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(<JS特性性能缺陷及JIT的解决方案>,<Javascript垃圾回收浅析>),主要描述了untyped,GC带来的问题 ...
JavaScript性能优化【下】--性能优化的具体方式
前言下面出现的代码只做效率测试,若运行,请修改其中存在命名冲突,再进行代码的执行. 代码优化如何精准测试 JavaScript 性能本质上就是采集大量的执行样本进行数学统计和分析. 使用基于 B ...
JavaScript 深度剖析 - JavaScript 性能优化
文章目录一.性能优化介绍二.JavaScript 内存管理(Memory Management) 2.1 内存管理介绍 2.2 JavaScript 中的内存管理三.JavaScript 中的垃 ...
JavaScript性能优化详解
性能优化介绍性能优化是不可避免的无处不在的前端性能优化 function func(){arr = []arr[100000] = 'lg is a dog' } func() JavaScrip ...
JavaScript强化教程——javascript性能优化
本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 --数据存取数据的存取位置也影响着JavaScript的运行速度,我们来总结一下如能分配存取位置最合理,能 ...
JavaScript性能优化 DOM编程
最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...
JavaScript性能优化：度量、监控与可视化1
HTTP事务所需要的步骤: 接下来,浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接,类似对讲机的Over(完毕) Roger(明白) TCP/IP模型 TCP即传输控制协议( ...

javascript性能优化-repaint和reflow

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

javascript性能优化-repaint和reflow相关推荐

最新文章

热门文章