如何减少浏览器的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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
详谈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网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
vue实现登录功能
2020/12/31 Vue.js
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
【python】matplotlib动态显示详解
2019/04/11 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
Django Form常用功能及代码示例
2020/10/13 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
业务经理的岗位职责
2013/11/16 职场文书
大四毕业生自荐书
2014/07/05 职场文书
学习作风建设心得体会
2014/10/22 职场文书
离婚协议书样本
2015/01/26 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
详解python的内存分配机制
2021/05/10 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang