JavaScript setTimeout () verlangsamt sich unter hoher Last

Question

Ich habe ein Skript erstellt, das die Hintergrundfarbe eines Elements verblasst. Ich benutze setTimeout () eine inkrementelle Änderung der Farbe alle 5 ms zu machen. Das Skript funktioniert gut, wenn ich die Hintergrundfarbe von einer Sache zu einer Zeit, nur bin Fading, aber wenn ich habe, sagen, 50 Elemente, die ich bin auf einmal verblassen, ist die Geschwindigkeit, viel langsamer als 5 ms wegen all die gleichzeitige setTimeout () s auf einmal ausgeführt wird. Ein Fade, die normalerweise sollten in 1 Sekunde ausführen, beispielsweise 30 Sekunden dauern kann, wenn ich 50 Elemente auf einmal bin Fading.

Irgendwelche Ideen, wie ich diese überwinden kann?

Hier ist das Skript für den Fall, jemand hat eine Idee:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
        = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

Es wird wie folgt verwendet:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);

Answer 1

Hier ist ein Artikel von Google, wo der Autor beschreibt ihre Arbeit auf Timer für Google Mail. Sie fanden heraus, dass ein einzigen Hochfrequenzzeitgeber mit schneller war als die Verwendung von mehreren Timer, wenn sie schwere und schnelle Timer Verwendung hatten.

Sie können einen Timer haben, der alle 5 ms, und fügen Sie alle Ihre Elemente Feuer, die auf eine Datenstruktur verblasste werden müssen, die Spuren, wo sie im schwindenden Prozess sind. Dann ein Timer kann diese Liste durchsehen und führen Sie die nächste Überblendung für jedes Element jedes Mal ausgelöst wird.

Auf der anderen Seite, haben Sie versucht, eine Bibliothek mit wie Mootools oder JQuery anstatt Ihre eigenen Animations-Framework rollen? Ihre Entwickler haben viel Arbeit investiert in diese Art von Operationen zu optimieren.

Answer 2

Zu allererst Ihr Skript nehmen nicht berücksichtigt, dass eine minimale Zeitüberschreitung in der Regel auf einem Browser 10-15 ms abhängig. Sie können sehen, meinen Beitrag zu diesem Thema . Im Innern finden Sie eine Tabelle für gängigen Browser und einen Link zu dem Programm, das misst, so können Sie den Anspruch selbst überprüfen. Es tut mir leid zu sagen, aber Iterationen alle 5 ms ist ein Wunschdenken.

Zum anderen Timer ist nicht Interrupts. Es gibt keine Magie in ihnen - sie können nicht unterbrechen, was im Browser ausgeführt wird und ihre Nutzlast auszuführen. Stattdessen werden sie bis in die laufenden Code beendet verschoben werden und der Browser die Kontrolle und die Fähigkeit Timer laufen zurückkommt. Verblassen 50 Elemente nehmen Sie sich Zeit, und ich wette, es mehr als 5 ms ist, vor allem, wenn Sie das gesamte latente Modell des Browsers zu berücksichtigen:. Sie DOM aktualisieren, und der Browser wird seine visuelle Darstellung aktualisieren ... irgendwann in der Zeit

Ich möchte mit einer positiven Note beenden:

• Statt Verblassen 50 einzelne Elemente aus, versuchen, sie zu gruppieren und verblassen ihre Eltern -. Es kann schneller sein
• Seien Sie kreativer bei UI. Versuchen Sie, kommen mit einer Lösung, die nicht auf einmal eine Menge unabhängiger Elemente ausblenden erfordert.
• Überprüfen Sie immer, dass Ihre Hintergrundannahmen korrekt sind, bevor um sie zu entwerfen.
• Wenn Sie können, versuchen modernen Browser zu zielen. Aus meiner persönlichen Erfahrung ist Google Chrome sehr gut mit Timer und seine JavaScript-Engine (V8) ist extrem schnell.

Answer 3

Zusätzlich zu den anderen Antworten, hier ist ein ausgezeichneter Artikel von John Resig über Timer: http://ejohn.org/blog/how-javascript-timers-work/