div.style.left = ‘10px’;
console.log(div.offsetLeft);
div.style.top = ‘10px’;
console.log(div.offsetTop);
div.style.width = ‘20px’;
console.log(div.offsetWidth);
div.style.height = ‘20px’;
console.log(div.offsetHeight);
还是1次重排吗?
Obviously not! 此时发生了4次重排!
上文不是说浏览器有渲染队列优化机制吗? 为什么会有4次?
这和offsetLeft/Top/Width/Height有关
offsetTop、offsetLeft、offsetWidth、offsetHeight
clientTop、clientLeft、clientWidth、clientHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
getComputedStyle()(IE中currentStyle)
这些会强制刷新队列要求样式修改任务立刻执行
因为浏览器并不确定在下面的代码中是否还有修改同样的样式,为了获取到当前正确的的即时值不得不立刻执行渲染队列触发重排!!!
1.分离读写操作
我们就可以对上面的代码进行优化
div.style.left = ‘10px’;