2024年Web前端性能优化_影响web前端页面性能的因素(1)，再不了解你就out啦-CSDN博客

本文链接：https://blog.csdn.net/2301_82244509/article/details/138449152

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

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

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

减少reflow触发条件

减少不必要的DOM深度.。
因为改变DOM树的一个层级，会导致整个DOM树改变。这会导致更多的时间花费到了回流上。
简化CSS规则，删除无用的CSS。
避免渲染重叠的几率。
如果我们创建了一个复杂呈现，例如动画，可使用绝对定位或者固定定位元素。
绝对定位，固定定位脱离文档流。
避免使用没有必要的复杂CSS选择器。尤其是后代选择器。这会导致CPU花费更多的事件计算。
CSS样式从右向左解析。

最小化reflow建议

例：

var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';

上述代码会导致reflow三次，应该把样式封装到一个样式中

var myelement = document.getElementById('myelement');
myelement.classList.add('newstyles');
+
.newstyles {
	width: 100px;
	height: 200px;
	margin: 10px;
}

使用“文档片段”

var
	i, li,
	frag = document.createDocumentFragment(),
	ul = frag.appendChild(document.createElement('ul'));

for (i = 1; i <= 3; i++) {
	li = ul.appendChild(document.createElement('li'));
	li.textContent = 'item ' + i;
}

document.body.appendChild(frag);