優化性能以設置多種內聯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);

但是，如果您在網頁中看不到性能受到影響，則不必擔心。