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

Question

我正在做很多事情

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

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

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

Answer 1

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

因此，与其做：

$('.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));
);

Answer 2

将一个字符串附加到style属性，然后-以后的样式将自动覆盖以前的样式。

$(el).attr('style',$(el).attr('style')+newStyleString);

但是，如果您在网页中看不到性能受到影响，则不必担心。