如何减少浏览器的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 AspxButton的客户端操作
Jun 26 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
Javascript进制转换实例分析
May 14 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
js 颜色选择插件
Jan 23 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python多图片合并PDF的方法
2019/01/03 Python
python感知机实现代码
2019/01/18 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
高中班主任评语大全
2014/04/25 职场文书
学校标语大全
2014/06/19 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
云台山导游词
2015/02/03 职场文书
mysql 子查询的使用
2022/04/28 MySQL
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers