前端性能优化（一）——DOM操作与重绘重排

DOM操作

使用js操作DOM的代价是昂贵的，有一个贴切的比喻，DOM与ECMScript就像两座小岛，而他们之间由一个收费的桥梁连接，ECMScript每次访问DOM都要“收费”。
所以DOM操作的性能优化有两点技巧：

1. 将运算尽量放在ECMScript一端，减少DOM操作
2. 对DOM对象进行缓存

重绘与重排

当DOM中的元素几何属性发生变化时，就会发生重排，重排一定会触发重绘；当元素只是发生样式变化时，只会触发重绘。
重排的代价是非常昂贵的。
所以应该尽量避免重排的发生：

1. 对同一DOM元素的操作尽量写在一起，最小化重排的次数
2. 不要在会引起重排的语句中穿插需要返回最新布局信息的语句，比如offsetTop、scrollTop、clientTop、getComputedStyle等
3. 使用fragment元素，批量操作DOM元素时使之脱离文档流，操作完之后再一次性加入文档
4. 将需要多次触发重排的元素的position设置为absolute或fixed，以避免触发其他元素的重排