2009-07-30 8 views
8

Ich verwende die innerHTML -Eigenschaft, um dynamisch eine zu ändern, um über einen Prozess zu berichten, der ein paar Sekunden dauert, um zu beenden. Das Problem ist, dass in Firefox die Seite nicht wirklich neu gerendert wird, um diese Änderung widerzuspiegeln, bis das Skript beendet ist. Dies macht die App träge. Gibt es eine Möglichkeit sicherzustellen, dass Änderungen am HTML-Code sofort angezeigt werden, auch wenn mehr Skripts ausgeführt werden?Wie kann ich den Browser zwingen, neu zu zeichnen, während mein Skript eine schwere Verarbeitung durchführt?

Antwort

14

Der Browser ist single threaded. Während das Skript läuft, kann der Browser nichts anderes tun. Wenn Sie etwas wie eine Fortschrittsanzeige machen möchten, müssen Sie setTimeout() oder setInterval() verwenden und Ihre Aufgabe in kleinere Stücke zerlegen, die in einem Intervall ausgeführt werden. Dadurch bleiben Lücken zwischen den Skriptläufen bestehen, die dem Browser die Kontrolle zurückgeben, wo der Browser neu zeichnen kann.

+0

Es scheint nicht der Fall zu sein, dass der Browser single threaded ist. Es hat einen Javascript-Thread, aber es gibt einen parallelen Thread, der die Seite rendert und das DOM manipuliert. –

+0

Das hängt wirklich davon ab, * welchem ​​* Browser du sprichst. Einige mögen das jetzt tun, wie Chrome mit seinem Multiprozess-Modell - wo der Inhalt jedes Browsers ein separater Prozess ist und der Chrom auch auf seinem eigenen Prozess ist. aber Sie können immer noch jeden Browser mit 'while (1)' hängen. Wie viel von dem Browser hängt, hängt davon ab, wie der Browser aufgebaut ist. – Breton

+0

Sie können den js-Thread aufhängen, indem Sie while (1) {} aufrufen, aber das bedeutet nicht, dass keine anderen Threads für Dom-Manipulation oder Inhalts-Rendering verwendet werden. Dies bedeutet, dass JS-Thread möglicherweise die Ausführung anderer Threads blockieren kann. Und Threads haben möglicherweise keine Beziehung zum Prozessmodell des Browsers (ein Prozess pro Seite oder ein Prozess für das gesamte Browserfenster) –

6

Versuchen Sie, Ihr Skript regelmäßig zu unterbrechen. Sie sollten in der Lage sein

setTimeout(nextFunction, 0); 

zu verwenden, um die notwendige Unterbrechung ohne lange Verzögerung zu schaffen, wo nextFunction die Funktion ist, die mit dem langen Verarbeitung fortgesetzt wird.

Verwandte Themen