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))
6.当你修改网页的默认字体时当,你修改 CSS 样式的时候
注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。
如何避免:
1. 把DOM离线后修改:
- 先将元素从document中删除,完成修改后再把元素放回原来的位置
- 将元素的display设置为”none”(有一次
repaint
),然后你想怎么改就怎么改。比如修改100
次,然后再把他显示出来 clone
一个DOM
节点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下- 如果需要创建多个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);
2. 集中修改样式
2.1尽可能少的修改元素style上的属性
2.2尽量通过修改className来修改样式
// 不好的写法
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// 推荐写法
el.className += " theclassname";
2.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
2.4缓存Layout属性值
var left=elem.offsetLeft; 多次使用left也就产生一次reflow
2.5设置元素的position为absolute或fixed
元素脱离标准流,也从DOM树结构中脱离出来,在需要reflow时只需要reflow自身与下级元素
2.6尽量不要用table布局
table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
2.7避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)
3.为动画的 HTML
元件使用 fixed
或 absoult
的 position
,那么修改他们的 CSS
是会大大减小 reflow
4.尽可能的修改层级比较低的 DOM
节点。当然,改变层级比较底的 DOM
节点有可能会造成大面积的 reflow
,但是也可能影响范围很小。
参考:
Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》
javascript性能优化-repaint和reflow
javascript性能优化-repaint和reflow的更多相关文章
- 【转】javascript性能优化-repaint和reflow
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- 摘:JavaScript性能优化小知识总结
原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...
- Javascript 性能优化的一点技巧
把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.
- JavaScript性能优化小窍门汇总(含实例)
在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...
- JavaScript性能优化小知识总结(转)
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- DOM性能瓶颈与Javascript性能优化
这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(<JS特性性能缺陷及JIT的解决方案>,<Javascript垃圾回收浅析>),主要描述了untyped,GC带来的问题 ...
- JavaScript 性能优化技巧分享
JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...
随机推荐
- PHP使用mysqli扩展库实现增删改查(面向对象版)
mysqli扩展库是mysql扩展库的改进版本,在mysql扩展库的基础上提高了稳定性和效率,mysqli扩展库有两套东西,一套就是面向过程的mysqli另一套是面向对象的mysqli.操作方式大体和 ...
- python基础之函数
python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...
- SSH整合之全注解
SSH整合之全注解 使用注解配置,需要我们额外引入以下jar包
- Three.js基础部分学习
一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a ...
- js中this的绑定
人们对于this的绑定常常有两个误解,一:指向函数本身,二:指向函数作用域.这两种想法都是错的,this并不指向函数本身,也不指向函数作用域. function foo(){ this.count++ ...
- 码农干货系列【20】--add gtTime to Promise.js
使用场景 在一些时候,希望一件task不能太快完成,需要大于多少时间才可以执行,就可以使用Promise的gtTime方法. 使用方式 Promise.gtTime(f1(), 5000).then( ...
- MFC-简单的函数使用
1. MessageBox(str);很简单的一个函数,该函数参数为字符串.用来弹出一个窗口显示str的内容,str为一个字符串. 2. UpdateData();该函数是vc++中处理控件变量的 ...
- Linux安全基础:网络配置命令
1.ifconfig查看和配置网络接口信息(1)设ip地址ifconfig eth0 192.168.0.1(2)暂时关闭或启用网卡ifconfig eth0 downifconfig eth0 up ...
- Eclipse部署项目的原理简介eclipse,wtpwebapps,tomcat
转载请注明出处! http://www.cnblogs.com/libingbin/ 感谢您的阅读.如果文章对您有用,那么请轻轻点个赞,以资鼓励.
- 【开源】玩的就是开源 - DevFw
http://www.cnblogs.com/newmin/ 最近真的爱上开源了,将自己7年积累下来的部分代码,发布成为一个项目:DevFw 项目如下: 项目名称 描述 仓库 AtNet.DevFw. ...