关于浏览器的重绘和重排问题

写这篇博客之前我是对重绘和重排没有什么概念的，然而今天在学习vuejs高仿饿了吗的项目时，碰到了这样一个问题


dropping(el, done) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = 'translate3d(0,0,0)';
el.style.transform = 'translate3d(0,0,0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0,0,0)';
inner.style.transform = 'translate3d(0,0,0)';
el.addEventListener('transitionend', done);
});
},
这是一段关于小球下落中的代码


/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
因为ES6语言规范会让被申明却未被调用的变量报错，所以加了/* eslint-disable no-unused-vars */ 这句代码。但我就想了，既然这个rf 变量未被调用，那为什么还要申明呢，于是我讲这个变量删除，去调试了一下，果然，出现了动画bug。后经高人指点，说这申明rf是为了触发浏览器的重排。哈哈哈哈，很关键啊老兄！于是我百度了关于重排的问题。触发重排或重绘的行为有很多比如：
*添加、删除、更新DOM节点
*通过display: none隐藏一个DOM节点-触发重排和重绘
*通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
*移动或者给页面中的DOM节点添加动画
*添加一个样式表，调整样式属性
*用户行为，例如调整窗口大小，改变字号，或者滚动。
*获取某些元素的属性（我使用的方法）

这里只是简单的概述，如果你想深入了解，请移步http://www.cnblogs.com/Chen-XiaoJun/p/6209821.html