减少重绘和重排(重流)

1. 最小化重绘和重流

由于重绘和重排代价可能较为昂贵，因此最好可以减少它的发生次数。可以合并多次对dom和样式的修改，然后一次处理掉。例如

const el = document.getElementById(‘test’);
el.style.padding = ‘5px’;
el.style.borderLeft = ‘1px’;
el.style.borderRight = ‘2px’;

该例中有3个样式属性被修改了，那么可以采取合并所有的改变然后一次处理。
※ 方案一：使用cssText（设置或者返回元素声明的内联样式）

const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

※ 方案二：修改css的class属性

const el = document.getElementById('test');
el.className += ' active';

2. 对于复杂的动画效果，使用绝对定位让其脱离文档流