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來查看是否存在性能差異。