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

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

详细说明，如果您确实注意到程序中的某些地方运行缓慢，并且您通过调用.height 对其进行跟踪，那么您可以通过切换到.css 来查看是否存在性能差异。