Web前端性能优化_影响web前端页面性能的因素

什么是重绘？
repaint（重绘）：当 DOM 元素的外观属性发生变化时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
触发时机：
一个元素的外观被改变，但没有改变布局的情况下发生。例如改变visibility、outline、前景色等。

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



### 文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。



这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)