-
CSS
-
使用
transform替代top -
使用
visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局 -
避免使用
table布局，可能很小的一个小改动会造成整个table的重新布局。 -
尽可能在
DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。 -
避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
<div> <a> <span></span> </a> </div> <style> span { color: red; } div > a > span { color: red; } </style>对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的
span标签然后设置颜色，但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的span标签，然后找到span标签上的a标签，最后再去找到div标签，然后给符合这种条件的span标签设置颜色，这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。 -
将动画效果应用到
position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择requestAnimationFrame，详见探讨 requestAnimationFrame。 -
避免使用
CSS表达式，可能会引发回流。 -
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如
will-change、video、iframe等标签，浏览器会自动将该节点变为图层。 -
CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让
transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。
-
-
JavaScript
- 避免频繁操作样式，最好一次性重写
style属性，或者将样式列表定义为class并一次性更改class属性。 - 避免频繁操作
DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。 - 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
- 避免频繁操作样式，最好一次性重写
