Javascript/jQuery - Gibt es einen Unterschied in der Leistung zwischen der Höhe() und CSS- ({ 'height'})

Question

Einstellung Höhe auf diese Weise:

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

Und auf diese Weise:

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

Ist Gibt es irgendeine Art von Leistungsunterschied zwischen diesen beiden?

Hat es auch Auswirkungen auf die Leistung von CSS3-Übergängen?

Answer 1

Lesen Sie die Quelle, Luke.

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

Der Unterschied zwischen den beiden ist, was, bevor er über die abgestimmte Elemente getan hat, und dass extra Parameter, der in .height übergeben wird. Was könnte rational eine große Verlangsamung verursachen? Ich habe keine wirkliche Idee. Vielleicht hat es mit Optimierungen zu tun, die eine js-Engine in einem tun kann, aber nicht in dem anderen. Wahrscheinlicher als nicht, ist der Perf-Test schlecht (das Testen dieser Dinge ist sehr schwierig).

Die Leistung dieser Methoden sollte jedoch nicht Ihre Hauptsorge sein. Wenn es wirklich ein Problem war, könnten Sie versuchen, es zu lösen, indem Sie beide Methoden ausprobieren, und das Sehen, das eine beträchtliche Verbesserung macht. Wie das Sprichwort sagt: "Vorzeitige Optimierung ist die Wurzel allen Übels".

Ausarbeitung, wenn Sie bemerken, dass etwas in Ihrem Programm langsam ist, und Sie es auf einen Anruf zu .height verfolgen, dann können Sie sehen, ob es einen Leistungsunterschied durch Wechseln zu .css gibt.