优化设置多个内联 CSS 样式的性能答案

【问题标题】：Optimizing performance for setting multiple inline css styles优化设置多个内联 CSS 样式的性能
【发布时间】：2014-02-20 14:12:11
【问题描述】：

我做了很多

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

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

大概在这种情况下，我们只需要修改一次style属性即可。但是，我对重新实现 .css 有点犹豫。有人已经这样做了吗？如果我决定重新实现它，是否有需要注意的问题？

【问题讨论】：

【解决方案1】：

将单个字符串附加到样式属性，然后 -- 以后的样式将自动覆盖较早的样式。

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

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

【讨论】：

【解决方案2】：

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

所以不要这样做：

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

【讨论】：