jQuery Performance setInterval

[AzRaIL]

Nabend,

arbeite seit längerem an einem Projekt und habe mittlerweile knapp 300 Zeilen jQuery Code in meiner index Datei stehen.
Nun nähert sich das Projekt dem Ende und ich fange an mir Gedanken über die Performance zu machen.

Hab zb. setInterval drin in der ich alle 30ms ca. 15 Werte auf der Seite abfrage und diese in Variablen speichere und anschließend vergebe.

Hab gehört man kann eigentlich komplett auf das setInterval verzichten und alles mit .resize, .scroll etc. machen was mir an sich gar nicht so falsch erscheint. Jedoch muss ich bei .resize zb. alle Variablen mind. einmal vorher beim Seitenstart schon abfragen und vergeben da die Funktion ja erst ausgeführt wird wenn man das Fenster verkleinert / vergrößert.
Ist das im Endeffekt trotzdem besser als die alternative mit dem Interval?

Des weiteren habe ich mehrere .click events wie ajax und modal. Würde es Performancemäßig etwas ausmachen wenn ich diese teile in eine externe Datei auslagere oder dient dass eher nur zur Übersicht?

Wäre dankbar für ein paar Tips was dieses Thema angeht :) Wie macht ihr das so? Kennt ihr evtl. Tools womit man gut übersichtlich und einfach die Ladezeiten ablesen kann? (In Chrome ist diese Funktion gegeben, aber mMn relativ unübersichtlich)

lg

 

[scbawik]

Du kannst zb sofort nach dem hinzufügen eines scroll eventlistener diesen "triggern":

elem.scroll(function () {}).scroll();

Ist doch eigentlich logisch dass es performanter ist, eine funktion nur wenn nötig auszuführen als diese alle 30 ms aufzurufen.

 

[Tronjer]

Du musst da zwischen Lade- und Ausführungszeit unterscheiden. Für erstere macht es Sinn, die JS Dateien zu minifien und direkt vor dem schließenden Body-Tag einzubinden. Das Network-Tab von Firebug eignet sich da gut zum Vergleich.

Überlege dir, was wirklich notwendig ist. 30 ms für ein Interval wahrscheinlich nicht, allerdings können auch scroll() und resize() Performance-Killer sein.

 

[AzRaIL]

Ist doch eigentlich logisch dass es performanter ist, eine funktion nur wenn nötig auszuführen als diese alle 30 ms aufzurufen.

Ja das stimmt, würde es denn auch klappen die .resize Funktion direkt beim Seitenstart einmal aufzurufen? Dann könnte ich mir die doppelte Variablendeklaration und Wertevergabe ja sparen.
Wenn ich nach deinem Beispiel vorgehen würde als Beispiel:

jQuery(document).ready(function() {
   jQuery(window).resize(function() {
      var test1 = ...;
      var test2 = ...;
      var test3 = ...;
      var test4 = ...;
      jQuery('vergabe').css(...);
      jQuery('vergabe1').css(...);
      jQuery('vergabe1').css(...);
   }).resize();
});

Edit: Hab mal das Network tool benutzt...Ergebnis: 2-3 Sekunden Ladezeit bis alles fertig geladen ist.

 

[scbawik]

Ja das stimmt, würde es denn auch klappen die .resize Funktion direkt beim Seitenstart einmal aufzurufen? Dann könnte ich mir die doppelte Variablendeklaration und Wertevergabe ja sparen.

Ja, das sollte klappen. Einfach mal testen.

Edit: Hab mal das Network tool benutzt...Ergebnis: 2-3 Sekunden Ladezeit bis alles fertig geladen ist.

Mit Ladezeit der Bilder? Dann ist es ja noch nicht bedenklich. Sieh dir mal diverse Newsportale an, da wartest du teilweise 10-20 Sekunden bis die Seite voll funktionsfähig ist.

Wie Tronjer bereits geschrieben hat, sind Lade- und Ausführungszeiten zwei unterschiedliche paar Schuhe.
Natürlich ist ein großes 4 MB Bild verhältnismäßig sowohl für Lade- als auch Ausführungszeit nicht vorteilhaft da es natürlich verglichen mit einem kleinen 100 KB Bild viel mehr Power benötigt.

allerdings können auch scroll() und resize() Performance-Killer sein.

Das kann ich nur im Zusammenhang mit "sichtbaren" Aktionen (zB CSS Eigenschaften ändern) bestätigen. Das scheint die Browser sichtlich zu überfordern wenn sie die Darstellung währen dem Resize- oder Scroll-Vorgang anpassen müssen. Hat jedoch nichts mit .scroll oder .resize direkt zu tun, sondern eher mit dem Umstand dass während dem jeweiligen Vorgang etwas an der Darstellung geändert wird. "Unsichtbare" Berechnungen funktionieren in der Regel ja einwandfrei.

 

[Gelöschtes Mitglied 3007]

Ich empfehle dir immer setTimeout zu verwenden. So reagiert die Funktion eigenständig auf den fall, dass die Ausführung deines Codes zu lange dauert.

Hier ein Beispiel:

function doSomething (interval) {
    var a = new Date().getTime();
    interval == null && (interval = 30);

    // dein code

    setTimeout(
        doSomething,
        Math.max(0, a + interval - new Date().getTime()),
        interval
    );
};