字节前端提前批面试题：下触发了几次回流几次重绘(1)

这和offsetLeft/Top/Width/Height有关

offsetTop、offsetLeft、offsetWidth、offsetHeight

clientTop、clientLeft、clientWidth、clientHeight

scrollTop、scrollLeft、scrollWidth、scrollHeight

getComputedStyle()（IE中currentStyle）

这些会强制刷新队列要求样式修改任务立刻执行

因为浏览器并不确定在下面的代码中是否还有修改同样的样式，为了获取到当前正确的的即时值不得不立刻执行渲染队列触发重排！！！

四.重绘与重排性能优化

---

1.分离读写操作

我们就可以对上面的代码进行优化

div.style.left = ‘10px’;

div.style.top = ‘10px’;

div.style.width = ‘20px’;

div.style.height = ‘20px’;

console.log(div.offsetLeft);

console.log(div.offsetTop);

console.log(div.offsetWidth);

console.log(div.offsetHeight);

这样就仅仅发生1次重排了！

2.样式集中改变

还是我们最初修改样式的代码

div.style.left = ‘10px’;

div.style.top = ‘10px’;

div.style.width = ‘20px’;

div.style.height = ‘20px’;

虽然现代浏览器有渲染队列的优化机制，但是古董浏览器效率仍然底下，触发了4次重排 ，即便这样，我们仍然可以做出优化 ，我们需要cssText属性合并所有样式改变

div.style.cssText = ‘left:10px;top:10px;width:20px;height:20px;’;

这样只需要修改DOM一次一并处理，仅仅触发了1次重排 ，而且只用了一行代码

除了cssText以外，我们还可以通过修改class类名来进行样式修改

div.className = ‘new-class’;

这种办法可维护性好，还可以帮助我们免除显示性代码，但是会消耗一点点的性能

3.缓存布局信息

div.style.left = div.offsetLeft + 1 + ‘px’;

div.style.top = div.offsetTop + 1 + ‘px’;

这种读操作完就执行写操作造成了2次重排

缓存可以进行优化

var curLeft = div.offsetLeft;

var curTop = div.offsetTop;

div.style.left = curLeft + 1 + ‘px’;

div.style.top = curTop + 1 + ‘px’;

相当于是分离读写操作，优化为1次重排

4.元素批量操作

现在我们想要向ul中循环添加大量li （如果ul还不存在，最好的办法是先循环添加li到ul，然后再把ul添加到文档，1次重排）

var ul = document.getElementById(‘demo’);

for(var i = 0; i < 1e5; i++){

var li = document.createElement(‘li’);

var text = document.createTextNode(i);

li.appendChild(text);

ul.appendChild(li);

}

我可以做出下面的优化

var ul = document.getElementById(‘demo’);

ul.style.display = ‘none’;

for(var i = 0; i < 1e5; i++){

var li = document.createElement(‘li’);

var text = document.createTextNode(i);

li.appendChild(text);

ul.appendChild(li);

}

ul.style.display = ‘block’;

var ul = document.getElementById(‘demo’);

var frg = document.createDocumentFragment();

for(var i = 0; i < 1e5; i++){

var li = document.createElement(‘li’);

var text = document.createTextNode(i);

li.appendChild(text);

frg.appendChild(li);

}

ul.appendChild(frg);

var ul = document.getElementById(‘demo’);

var clone = ul.cloneNode(true);

for(var i = 0; i < 1e5; i++){

var li = document.createElement(‘li’);

var text = document.createTextNode(i);

li.appendChild(text);

clone.appendChild(li);

}

ul.parentNode.replaceChild(clone,ul);

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

entNode.replaceChild(clone,ul);

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-YzQL8BkU-1714648849376)]

[外链图片转存中…(img-YRByuX76-1714648849377)]