前端性能优化基础知识

在页面样式都能实现以后，就开始考虑：同一个效果，该用什么样的方式和代码去实现它比较规范？

reflow和repaint
reflow（回流）：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手

repaint（重绘）：简而言之就是重新绘制啦~

关系：位置改变触发回流，视觉改变触发重绘。回流一定触发重绘，重绘不一定触发回流。/* 这句话挺关键的*/

 

以下操作会引起回流：

1、改变窗口大小
2、font-size大小改变
3、增加或者移除样式表
4、内容变化（input中输入文字会导致）
5、激活CSS伪类（:hover）
6、操作class属性，新增或者减少
7、js操作dom
8、offset相关属性计算
9、设置style的值

如何减少页面回流：

1、一起变化 如果要改变一个元素的样式，可以将所有样式集中在一个class上面一次变化，而不是变化几次。
2、具有动画效果请使用absolute
因为absolute元素的改变对其它元素的回流影响不大，所以我们的动画效果的元素还是将他弄成absolute吧。
3、避免使用表格布局（记住只是布局哦，我们数据还是应该用表格的）
请绝对不要使用CSS表达式，性能杀手啊，特别是IE
4、在最末改变元素
因为回流是自上而下的，所以下不及上，我们在最后面修改信息对全局影响越少。
5、动画移动时候，要控制
比如我们拖动元素时候，我是在他x或者y坐标改变5px才操作，这样虽说降低了平滑度，但是对性能有提高。

以下操作会触发重绘：

1、改变字体
2、增加或者移除样式表
3、内容变化
4、激活css伪类，比如：hover
5、脚本操作dom
6、计算offsetWidth和offsetHeight属性
7、设置style属性的值
尽量避免以上操作，若不能避免，尽量多把次操作组合成一次操作