Javascript性能 - Dom Reflow - Google文章

首先，我们需要了解什么是“Reflow”。在浏览器中，Reflow是指浏览器对页面进行重新布局，这个过程会导致整个页面重新计算布局、几何属性和绘制，这是一个非常耗时的过程。

在JavaScript中，如果我们对DOM元素进行操作，例如添加、删除或修改元素，浏览器就需要重新计算布局，这个过程就是Reflow。因此，在编写JavaScript代码时，我们应该尽量避免过多的DOM操作，特别是那些会导致Reflow的操作，因为这会影响页面的性能和响应速度。

针对上述问题，我们可以采用以下方法来优化JavaScript性能：

1. 使用DocumentFragment：在操作DOM元素时，可以使用DocumentFragment来暂时存储元素，然后再将它们添加到页面中。这样可以减少页面的Reflow次数，从而提高性能。
2. 避免使用table布局：由于table布局会导致浏览器进行多次Reflow，因此应该尽量避免使用table布局。
3. 使用CSS3动画：在可能的情况下，应该使用CSS3动画来代替JavaScript动画。CSS3动画可以通过GPU加速，从而提高性能。
4. 使用requestAnimationFrame：在进行动画操作时，应该使用requestAnimationFrame来代替setTimeout或setInterval。这样可以保证浏览器在每一帧中都进行优化，从而提高性能。
5. 避免使用CSS表达式：CSS表达式会导致浏览器进行多次Reflow，因此应该尽量避免使用CSS表达式。

总之，在编写JavaScript代码时，我们应该尽量避免过多的DOM操作，特别是那些会导致Reflow的操作，从而提高页面的性能和响应速度。