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

Question

以这种方式设置高度：

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

这样：

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

这两者之间有什么性能差异吗？

它是否也与CSS3过渡的性能有关？

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参数.height 。 什么可以合理地导致大幅放缓？ 我不是真的想法。 也许它与js引擎在一个中可以做的优化有关，而与另一个无关。 更可能的是，性能测试很糟糕（正确测试这些东西非常困难）。

但是，这些方法的表现不应该是您最关心的问题。 如果它真的是一个问题，你可以尝试通过尝试这两种方法来解决它，并看看哪种方法有了相当大的改进。 正如谚语所说：“过早优化是万恶之源”。

如果您确实注意到程序中的某些内容很慢，并且您将其跟踪到.height的调用，那么您可以通过切换到.css来查看是否存在性能差异。