JQUERY outerhigh Performance

[Tobias]

Hallo,

ich habe ein Script, welches beim Laden der Seite nach Elementen sucht und wenn dieses höher als 300px ist, die Klasse "min" hinzufügt. Ich musste nun feststellen, dass das einiges an Performance kostet, wenn es viele Elemente sind. Gibt es hier ggf. eine bessere Variante?

	$( ".ticket_msg > div:nth-child(2) > div" ).each(function( index ) {
		if ($(this).outerHeight() < 300) {
			$(this).addClass("min");
		}
	});

[Henry]

Hallo Tobias,

Ich musste nun feststellen, dass das einiges an Performance kostet, wenn es viele Elemente sind.

Das ist aus Usersicht gar nicht schön.

Gibt es hier ggf. eine bessere Variante?

Bestimmt sogar, aber dann wahrscheinlich mit einer anderen Methode. Ist schwer vorstellbar, was du da versuchst darzustellen, weil gibt ja schließlich auch viele Möglichkeiten ohne jquery. Gibt zb. auch max-height oder einfache Abfragen zu outer-height auch sind Pixel vielleicht nicht die richtige Abfrageeinheit, sondern vw oder vh. Lässt sich aber erst alles sagen, wenn du mehr ins Detail gehst.

Gruss
Henry

[Rolf B]

Hallo Tobias,

Siehe Additional Note 2

outerHeight ist laut API-Dokumentation unzuverlässig, und laut Sourcecode ein Performancefresser. Nicht nur, weil Du this erstmal wieder neu in ein jQuery-Set verpackst, sondern vor allem, weil jQuery das über die .css() Methode laufen lässt, die vieeel mehr berechnet als Du brauchst.

Muss es $(this).outerHeight() sein? Es gibt auch ein Leben jenseits von jQuery! Reicht nicht auch this.clientHeight? (Infos im Self-Wiki oder MDN) problem sind alte Android Webview Browser, die kennen das Property nicht. Da müsstest Du per Feature Check gucken, ob das Property existiert, und im Zweifelsfall auf die min-Logik verzichten.

Aber allgemein gefragt: was willst Du durch das Setzen der Klasse min erreichen? Möglicherweise lässt sich mit anderen Mitteln eine Lösung finden,

Rolf