有关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控制Div拖拽效果完整实例分析
Apr 15 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
vue下的@change事件的实现
Oct 25 Javascript
引用外部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
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
团支部建设方案
2014/05/02 职场文书
开服装店计划书
2014/08/15 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
先进党支部申报材料
2014/12/24 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书