有关javascript的性能优化 (repaint和reflow)


Posted in Javascript onApril 12, 2013
 repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。
reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
何时发生:
. DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
. 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
. 应用新的样式或者修改任何影响元素外观的属性
. Resize浏览器窗口、滚动页面
. 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE)) 
如何避免:
. 先将元素从document中删除,完成修改后再把元素放回原来的位置
. 将元素的display设置为”none”,完成修改后再把display修改为原来的值
. 如果需要创建多个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上的属性 

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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
引用外部js乱码问题分析及解决方案
Apr 12 #Javascript
关于query Javascript CSS Selector engine
Apr 12 #Javascript
使用jQuery清空file文件域的解决方案
Apr 12 #Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 #Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 #Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 #Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 #Javascript
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
比较完整的微信开发php代码
2016/08/02 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
Sanic框架路由用法实例分析
2018/07/16 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python实现视频压缩功能
2020/12/18 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
EJB的角色和三个对象
2015/12/31 面试题
产品包装策划方案
2014/05/18 职场文书
企业宣传策划方案
2014/05/29 职场文书
党课主持词大全
2015/06/30 职场文书
换届选举主持词
2015/07/03 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Python中with上下文管理协议的作用及用法
2022/03/18 Python