Javascript / jQuery - height() 和 .css({'height'}) 之间是否存在性能差异？

Question

这样设置高度：

$('element').height(1000);

而这种方式：

$('element').css({'height': '1000px'});

这两者之间是否有性能差异？

这是否对CSS3过渡的性能产生影响？

- shrewdbeans

---

至少它与CSS3转换无关，它只是一个普通的CSS属性。 - Rene Pot

.css()更快：http://jsperf.com/jquery-css-height-vs-method-height - Joe

任何涉及JavaScript和“哪个更快”（a或b）的问题，都可以在JS Perf上自行回答。请注意不要改变原意，只需使翻译更易理解。 - David Thomas

Answer 1

看源代码，卢克。

jQuery.prototype.height:

//snipped to end:
return value === undefined ?
    // Get width or height on the element, requesting but not forcing parseFloat
    jQuery.css( elem, type, extra ) :

    // Set width or height on the element
    jQuery.style( elem, type, value, extra );

jQuery.prototype.css:

return value !== undefined ?
    jQuery.style( elem, name, value ) :
    jQuery.css( elem, name );

两者之间的区别在于匹配元素之前所做的操作以及传递给.height的extra参数。什么会导致明显的减速呢？我并不确定。也许与js引擎可以在其中一种方法中进行优化有关，但在另一种方法中无法进行。更可能的是，性能测试结果不准确（正确测试这些内容非常困难）。

然而，这些方法的性能不应该是您最关心的问题。如果真的是一个问题，您可以尝试使用两种方法，并查看哪种方法会带来明显的改进。正如谚语所说：“过早地优化是万恶之源”。

进一步解释，如果您确实注意到程序运行缓慢，并将其追踪到对.height的调用，则可以通过切换到.css来查看性能差异。

- Zirak