有关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的.animate()函数在IE6下的问题
Dec 03 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 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
一个SQL管理员的web接口
2006/10/09 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python编程实现蚁群算法详解
2017/11/13 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
tensorflow多维张量计算实例
2020/02/11 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
Unix里面如何在后台运行程序
2016/10/14 面试题
医学生实习自荐信
2013/10/01 职场文书
小学生检讨书大全
2014/02/06 职场文书
协议书样本
2014/04/23 职场文书
升职演讲稿范文
2014/05/23 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
bose降噪耳机音能消除人声吗
2022/04/19 数码科技