优化设置多个内联css样式的性能

Question

我做了很多

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

使用jQuery，现在它对我来说是一个性能瓶颈。看看jQuery的实现，它似乎是单独设置每个样式，导致样式属性的多个修改。

据推测，在这种情况下，我们只需要修改一次style属性。但是，我对重新实现.css有点犹豫。有没有人这样做过？如果我决定重新实现它，是否会有需要注意的事情？

Answer 1

设置样式的最大性能来自于破坏布局。当您更改影响布局的属性（例如：宽度），然后立即询问有关布局的信息时，会发生这种情况。如果你不这样做（例如通过将更改一起批处理），那么一次设置样式一个属性与一次整个样式文本几乎完全相同，因为渲染引擎非常聪明。< / p>

所以不要这样做：

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

但是，如果您无法感知网页的效果，我不会担心。