性能优化篇

一，重排与重绘导致的性能问题

浏览器的重排重绘导致一定的性能问题，频繁的性能操作会严重导致浏览器卡顿，影响用户体验；因此在开发过程中我们应该尽量的避免浏览器的重排重绘，从而性能与用户体验；

布局（回流）与绘制（重绘）：第一次布局叫布局，后续DOM操作等导致的布局叫回流。

很多时候无法避免操作dom，那只能对dom操作进行优化了，就像react一样，我们可以在积攒一定会导致重排重绘的操作后一次性的去改变dom；庆幸前端社区的活跃，这里有很多已有的工具可以使用；

解决方案：

1，fastdom

https://github.com/wilsonpage/fastdom

它会先进行读操作，再一次性进行写操作，从而减少操作dom，提升浏览器性能，说实话提升了不少；
具体使用方法，将读取dom的操作放到measure中，将写操作放到mutate中

2，解决重绘卡顿的终极法宝 - - requestAnimationFrame

浏览器视图的更新是一帧帧更新的，在监听事件变化的时候在一帧中有时候往往触发了多个相同的事件，这样严重影响了浏览器的性能和用户的体验，因此可以使用该函数使其一帧只触发一次。

3, 只影响复合图层，不重绘

只触发 复合，但不会触发回流和重绘的几个属性：

position，sacle，opacity, rotation

所以，动画的制作用这个比改变top,left等值要来得性能高。 

 

观察重绘的选项：打开控制台，按ctrl+shift+p然后搜索rendering，选中paint flashing, 元素显示绿色代表正在重绘