如何减少浏览器的reflow和repaint


Posted in Javascript onFebruary 26, 2015

1.避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种:

(1). 先将元素从document中删除,完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”,完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document

2.集中修改样式

(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式
(3). 通过cssText属性来设置样式值

3. 缓存Layout属性值

对于Layout属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;

4.设置元素的position为absolute或fixed

在元素的position为static和relative时,元素处于DOM树结构当中,当对元素的某个操作需要重新渲染时,浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的Javascript动画方面尤其值得考虑。

以上就是个人总结的一些关于减少浏览器reflow和repaint的事项,希望大家能够喜欢。

Javascript 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
微信小程序实现可长按移动控件
Nov 01 Javascript
JS setTimeout与setInterval的区别
Apr 20 Javascript
详谈javascript中DOM的基本属性
Feb 26 #Javascript
jqueryUI里拖拽排序示例分析
Feb 26 #Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 #Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 #Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 #Javascript
javascript获得当前的信息的一些常用命令
Feb 25 #Javascript
javascript实现图像循环明暗变化的方法
Feb 25 #Javascript
You might like
php数组去重实例及分析
2013/11/26 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python深入学习之装饰器
2014/08/31 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python元组知识点总结
2019/02/18 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Numpy的简单用法小结
2019/08/28 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
三年级评语大全
2014/04/23 职场文书
暑假学习心得体会
2014/09/02 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
不同意离婚代理词
2015/05/23 职场文书
上学路上观后感
2015/06/16 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
python 中的jieba分词库
2021/11/23 Python