前端性能优化基础篇

凸凸：
性能优化这是一个多么“高大上”的词语，听着就很牛x。目前了解的大概有几类吧：HTML优化、CSS优化、JS优化、图片优化、文件合并与优化（这个我就不是很清楚了，喜欢的小伙伴自己探索吧！！！），这几类都是比较典型、比较基础的优化方案，在这里不多说；今天主要是说的开发者在开发过程中因为处理不当而导致影响性能的其中原因之一：重绘与回流（重排）。。。

小场景：
前端开发过程中，有时会在不经意之间创造让浏览器“不喜欢”的代码，导致“浏览器浪费更多时间/空间/精力去干更多的活（明明有很简单的方式，偏偏要复杂化），有点烦，不是那么心甘情愿”。
思考：
作为一名开发人员，必须保证代码质量，如何提高浏览器性能？（如果你做到了，浏览器可能是会纵情于你的o）如何做到降低浏览器重新渲染的频率和成本 ？？？

1、DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。

2、如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。

3、不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
简单例子：

1
2
3
4
5
6
7
8
9
10
11

// 不推荐
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// 推荐
el.className += " theclassname";

// 推荐
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

4、尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。

5、先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。

6、position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。

7、只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。

8、使用虚拟DOM的脚本库，比如React等。

9、使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染（这两个方法暂时没用过，不过多介绍）。

目前理解是这样

待续…………………….