有关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 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
vue-cli在 history模式下的配置详解
Nov 26 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
引用外部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
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
Node.js实现发送邮件功能
2017/11/06 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
不可错过的十本Python好书
2017/07/06 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
工厂厂长岗位职责
2013/11/08 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
电力培训学习心得体会
2016/01/11 职场文书
高中美术教学反思
2016/02/17 职场文书