2024年最全字节前端提前批面试题：触发了几次回流几次重绘(1)，2024前端面试笔试总结

对象篇

模块化编程-自研模块加载器

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

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’;

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);

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

前端视频资料：

了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

[外链图片转存中…(img-1EyD62Ml-1715680306410)]

前端视频资料：
[外链图片转存中…(img-xZYHHlnG-1715680306411)]