组合 $.css() 调用的性能改进？答案

【问题标题】：Performance improvement in combining $.css() calls?组合 $.css() 调用的性能改进？
【发布时间】：2013-03-23 19:33:33
【问题描述】：

对于我正在维护的一个 jQuery 应用程序，我最近所做的一项更改涉及采用如下代码：

$someElement.click(function (e) {
  e.preventDefault();

  $someOverlay.css('left', e.pageX);
  $someOverlay.css('top', e.pageY);
  $someOverlay.fadeIn();
});

并将其修改为：

$someElement.click(function (e) {
  e.preventDefault();

  $someOverlay.css({
    'left': e.pageX,
    'top': e.pageY
  });

  $someOverlay.fadeIn();
});

我在发现可以简单地将对象传递给$.css() 方法后进行了更改。当然，按照我的习惯，我必须考虑这样做的性能影响。在我看来，调用一次$.css() 比调用两次$.css() 更有效……但是，这也是 JavaScript，这是一种我不像 C# 那样精通的语言。

那么，问题：上面哪段代码是将一些 CSS 应用于元素的更高效的方式？

【问题讨论】：

您在客户端工作。您正在使用客户的电脑来执行此任务。如果他使用的是台式电脑，那么他的规格比您可以完成的任何任务所需的最低要求高出几个数量级。服务器端、嵌入式系统和移动/低规格系统的性能很重要。当然不是在网页上浪费工作时间的东西
这不是我为之苦恼的事情，我只是好奇，因此，我可以以最优化的方式编码（当然取决于具体情况）。这不是“失败”工作时间”问题，而不是“最佳实践”问题。

标签： jquery performance optimization

【解决方案1】：

第一个答案：几乎可以肯定没关系。

第二个答案：如果您遍历 jQuery css 方法（这绝非易事！），您会发现使用组合形式（传入规范对象）可能更有效。

【讨论】：

为什么你说几乎可以肯定不重要？
@AndrewGray：因为除非您在用户等待时在紧密循环中执行 100,000 次（在这种情况下，您可能还有其他问题），否则不会有真实的、可察觉的差异他们之间。
@AndrewGray - 因为你可能永远不会注意到差异。如果 T.J.会给我们一个element.style 的例子，这可能是你能做的最大的改进，但你可能永远也不会注意到它的区别？
@adeneo：可能不会。我只在点击事件上发生这种情况，即使那样，这也不是可发送垃圾邮件的点击。这个问题纯粹出于好奇。（另外，“以防万一”我不得不担心特定元素上的垃圾 CSS 更改。）

【解决方案2】：

第二个变种被描述为良好的parcticehere，所以我认为性能会更好。

// passing object literals as parameters is good practice

var $foo = $( '#foo' );

$foo.css({
  'color': 'red',
  'width': '200px',
  'height': '200px'
});

【讨论】：