javascript - 优化性能以设置多种内联CSS样式

我正在做很多事情

 element.css {
     style1: val1
     style2: val2
     ...
 }

使用jQuery，现在对我来说这是一个性能瓶颈。看一下jQuery的实现，似乎是分别设置每个样式，从而导致对style属性的多次修改。

大概在这种情况下，我们只需要修改一次style属性。但是，我有点犹豫要重新实现.css。有人做过吗？如果我决定重新实现它，是否会有需要注意的陷阱？

最佳答案

设置样式带来的最大性能损失是废弃布局。当您更改会影响布局的属性（例如：宽度），然后立即询问有关布局的信息时，就会发生这种情况。如果您不这样做（例如，将更改合并在一起），则一次设置一个样式属性，而不是一次设置整个样式文本，则几乎是相同的，因为渲染引擎对此非常聪明。

因此，与其做：

$('.myItem').each(
  $(this).css('width', $(this).css('width') + 10);
);

改成：

var widths = [];

$('.myItem').each(
  widths.push($(this).css('width'));
);

$('.myItem').each(
  $(this).css(widths.shift() + 10));
);