一些关于性能优化的总结

这是一篇自己学习用的文章小结，都摘抄自各大神的文章，会持续更新，如果你看到了，并且看不懂，别嘲笑我，毕竟菜鸟的理解方式是旋转跳跃的。哈哈哈~

1、减少CSS的回流和重绘。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流。当页面布局和几何属性改变时就需要回流。假设你直接操作body，比如在body最前面插入1个元素，会导致整个render tree回流，这样代价当然会比较高，但如果是指body后面插入1个元素，则不会影响前面元素的回流。

如何减少回流、重绘 1. 直接改变className (尽可能在 DOM 树的最末端) 2. 避免设置多项内联样式 3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值。不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。 4. 权衡平滑和速度 5. 避免使用table布局 6. 避免使用CSS的javaScript表达式 (仅 IE 浏览器)