如何减少浏览器的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 相关文章推荐
用js格式化金额可设置保留的小数位数
May 09 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
详解JS浏览器事件循环机制
Mar 27 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笔试题
2009/08/04 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
python实现简单的单变量线性回归方法
2018/11/08 Python
浅谈python3中input输入的使用
2019/08/02 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
DTD的含义以及作用
2014/01/26 面试题
2014年妇联工作总结
2014/11/21 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
地球上的星星观后感
2015/06/02 职场文书
纪检监察立案决定书
2015/06/24 职场文书
货款欠条范本
2015/07/03 职场文书