javascript - 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 );

两者之间的区别在于在遍历匹配的元素之前所做的事情，以及extra传入的参数.height。什么可以合理地导致大幅放缓？我没有真正的想法。也许它与 js 引擎可以在一个中做的优化有关，但不是另一个。性能测试很可能很糟糕（正确测试这些东西非常困难）。

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

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