Vor kurzem habe ich diese Art von Warnung erhalten, und dies ist mein erstes Mal, dass ich sie bekomme:
[Violation] Long running JavaScript task took 234ms [Violation] Forced reflow while executing JavaScript took 45ms
Ich arbeite an einem Gruppenprojekt und habe keine Ahnung, woher das kommt. Das ist noch nie passiert. Plötzlich erschien es, als sich jemand anderes an dem Projekt beteiligte. Wie finde ich heraus, welche Datei / Funktion diese Warnung verursacht? Ich habe nach der Antwort gesucht, aber hauptsächlich nach der Lösung, wie man sie löst. Ich kann es nicht lösen, wenn ich nicht einmal die Ursache des Problems finde.
In diesem Fall wird die Warnung nur in Chrome angezeigt. Ich habe versucht, Edge zu verwenden, habe jedoch keine ähnlichen Warnungen erhalten und es noch nicht in Firefox getestet.
Ich bekomme sogar den Fehler von jquery.min.js
:
[Violation] Handler took 231ms of runtime (50ms allowed) jquery.min.js:2
javascript
google-chrome
dom
procatmer
quelle
quelle
Antworten:
Aktualisieren : Chrome 58+ hat diese und andere Debug-Meldungen standardmäßig ausgeblendet. Um sie anzuzeigen, klicken Sie auf den Pfeil neben "Info" und wählen Sie "Ausführlich".
Chrome 57 hat standardmäßig "Verstöße ausblenden" aktiviert. Um sie wieder einzuschalten, müssen Sie Filter aktivieren und das Kontrollkästchen "Verstöße ausblenden" deaktivieren.
Ich denke, es ist wahrscheinlicher, dass Sie auf Chrome 56 aktualisiert haben. Diese Warnung ist meiner Meinung nach eine wunderbare neue Funktion. Deaktivieren Sie sie meiner Meinung nach nur, wenn Sie verzweifelt sind und Ihr Prüfer Ihnen die Noten wegnimmt. Die zugrunde liegenden Probleme sind in den anderen Browsern vorhanden, aber die Browser sagen Ihnen einfach nicht, dass ein Problem vorliegt. Das Chromium-Ticket ist hier, aber es gibt keine wirklich interessante Diskussion darüber.
Diese Meldungen sind Warnungen anstelle von Fehlern, da sie keine größeren Probleme verursachen. Dies kann dazu führen, dass Frames gelöscht werden oder auf andere Weise weniger flüssig werden.
Es lohnt sich jedoch, sie zu untersuchen und zu korrigieren, um die Qualität Ihrer Anwendung zu verbessern. Um dies zu erreichen, müssen Sie darauf achten, unter welchen Umständen die Meldungen angezeigt werden, und Leistungstests durchführen, um einzugrenzen, wo das Problem auftritt. Der einfachste Weg, um Leistungstests zu starten, besteht darin, folgenden Code einzufügen:
Wenn Sie fortgeschrittener werden möchten, können Sie auch den Chrome-Profiler verwenden oder eine Benchmarking-Bibliothek wie diese verwenden .
Sobald Sie einen Code gefunden haben, der lange dauert (50 ms ist der Schwellenwert von Chrome), haben Sie mehrere Möglichkeiten:
(1) und (2) mögen schwierig oder unmöglich sein, aber es ist manchmal sehr einfach und sollte Ihre ersten Versuche sein. Bei Bedarf sollte dies immer möglich sein (3). Dazu verwenden Sie Folgendes:
oder
Weitere Informationen zur Asynchronität von JavaScript finden Sie hier .
quelle
performance.now()
, könnten Sie verwendenconsole.time
( developer.mozilla.org/en-US/docs/Web/API/Console/time )console.time('UniquetLabelName') ....code here.... console.timeEnd('UniqueLabelName')
Dies sind nur Warnungen, wie alle erwähnt haben. Wenn Sie diese Probleme jedoch lösen möchten (was Sie sollten), müssen Sie zuerst herausfinden, was die Warnung verursacht. Es gibt keinen Grund, aus dem Sie eine Force-Reflow-Warnung erhalten können. Jemand hat eine Liste für einige mögliche Optionen erstellt. Sie können der Diskussion folgen, um weitere Informationen zu erhalten.
Hier ist der Kern der möglichen Gründe:
Überprüfen Sie hier mehr .
Außerdem finden Sie hier den Chromium-Quellcode aus der ursprünglichen Ausgabe und eine Diskussion über eine Leistungs-API für die Warnungen.
Bearbeiten: Es gibt auch einen Artikel darüber, wie Sie den Layout-Reflow in PageSpeed Insight von Google minimieren können . Es wird erklärt, was Browser-Reflow ist:
Außerdem wird erklärt, wie dies minimiert werden kann:
quelle
Ein paar Ideen:
Entfernen Sie die Hälfte Ihres Codes (möglicherweise durch Auskommentieren).
Ist das Problem noch da? Großartig, Sie haben die Möglichkeiten eingegrenzt! Wiederholen.
Ist das Problem nicht da? Ok, sieh dir die Hälfte an, die du auskommentiert hast!
Verwenden Sie ein Versionskontrollsystem (z. B. Git)? Wenn ja,
git checkout
einige Ihrer neueren Commits. Wann wurde das Problem eingeführt? Sehen Sie sich das Commit an, um genau zu sehen, welcher Code sich geändert hat, als das Problem zum ersten Mal auftrat.quelle
git checkout E
sehen, ob das Problem bereits besteht. Wenn ja, werde ich in der ersten Hälfte der Commits weiterhin nach dem Problem suchen. Ansonsten suche ich das Problem in der zweiten Hälfte..js
und das Problem weiterhin besteht ... könnte es sich um eine Bibliothek handeln, die Sie über ein<script src="...">
Tag eingebracht haben ! Vielleicht etwas, über das man sich keine Sorgen machen sollte (zumal es nur eine Warnung ist)?.js
Datei. anscheinend ist es wichtig. es verlangsamt meine Seite ziemlich bedeutend. Trotzdem nochmals vielen Dank für Ihre Antworten und Ideen.Führen Sie Ihre Anwendung aus und zeichnen Sie sie auf der Registerkarte "Leistung" von Chrome auf, um die Ursache des Problems zu ermitteln .
Dort können Sie verschiedene Funktionen überprüfen, deren Ausführung lange gedauert hat. In meinem Fall stammte diejenige, die mit Warnungen in der Konsole korrelierte, aus einer Datei, die von der AdBlock-Erweiterung geladen wurde, aber dies könnte in Ihrem Fall etwas anderes sein.
Überprüfen Sie diese Dateien und versuchen Sie festzustellen, ob es sich um den Code einer Erweiterung oder um Ihren handelt. (Wenn es Ihnen gehört, haben Sie die Ursache Ihres Problems gefunden.)
quelle
Suchen Sie in der Chrome-Konsole auf der Registerkarte "Netzwerk" nach den Skripten, deren Laden am längsten dauert.
In meinem Fall gab es eine Reihe von Angular-Add-On-Skripten, die ich aufgenommen, aber noch nicht in der App verwendet hatte:
Dies waren die einzigen JavaScript-Dateien, deren Laden länger dauerte als die Zeit, die der Fehler "Long Running Task" angegeben hat.
Alle diese Dateien werden auf meinen anderen Websites ausgeführt, ohne dass Fehler generiert wurden. Ich habe jedoch den Fehler "Long Running Task" in einer neuen Web-App erhalten, die kaum Funktionen hatte. Der Fehler wurde sofort nach dem Entfernen gestoppt.
Ich vermute, dass diese Angular-Add-Ons rekursiv in immer tieferen Abschnitten des DOM nach ihren Start-Tags gesucht haben. Da sie keine gefunden haben, mussten sie vor dem Beenden das gesamte DOM durchlaufen, was länger dauerte als von Chrome erwartet - daher die Warnung.
quelle
Ich habe die Wurzel dieser Nachricht in meinem Code gefunden, der Knoten gesucht und versteckt oder angezeigt hat (offline). Das war mein Code:
Die Registerkarte Leistung (Profiler) zeigt das Ereignis an, das ungefähr 60 ms dauert:
Jetzt:
Die Registerkarte Leistung (Profiler) zeigt nun das Ereignis an, das ungefähr 1 ms dauert:
Und ich habe das Gefühl, dass die Suche jetzt schneller funktioniert (229 Knoten).
quelle
Ich habe eine Lösung im Apache Cordova-Quellcode gefunden. Sie implementieren wie folgt:
Einfache Implementierung, aber kluger Weg.
Verwenden Sie über Android 4.4
Promise
. Verwenden Sie für ältere BrowsersetTimeout()
Verwendungszweck:
Nach dem Einfügen dieses Trickcodes sind alle Warnmeldungen verschwunden.
quelle
Dies wurde in der Chrome 56-Beta hinzugefügt, obwohl es nicht in diesem Änderungsprotokoll aus dem Chromium-Blog enthalten ist: Chrome 56 Beta: Warnung „Nicht sicher“, Web-Bluetooth und CSS
position: sticky
Sie können dies in der Filterleiste der Konsole mit dem Kontrollkästchen Verstöße ausblenden ausblenden .
quelle
Wenn Sie Chrome Canary (oder Beta) verwenden, aktivieren Sie einfach die Option "Verstöße ausblenden".
quelle
Dies ist ein Verstoßfehler von Google Chrome, der anzeigt, wann die
Verbose
Protokollierungsstufe aktiviert ist.Beispiel für eine Fehlermeldung:
Erläuterung:
Originaler Artikel: Minimierung des Browser-Reflow von Lindsey Simon, UX-Entwickler, veröffentlicht auf developer.google.com.
Und dies ist der Link Google Chrome Sie im Performance - Profiler gibt, auf die Layout - Profile (die mauve Regionen), für weitere Informationen auf die Warnung.
quelle
Das Hinzufügen meiner Erkenntnisse hier als dieser Thread war die Frage nach dem Stapelüberlauf zum Thema.
Mein Problem war in einer Material-UI-App (frühe Stadien)
Als ich einige Berechnungen durchgeführt habe, die das Rendern der Seite erzwingen (eine Komponente, "Anzeigeergebnisse", hängt davon ab, was in anderen "Eingabeabschnitte" festgelegt ist).
Alles war in Ordnung, bis ich den "Status" aktualisiert habe, der die "Ergebniskomponente" zum erneuten Rendern zwingt. Das Hauptproblem hierbei war, dass ich ein Material-UI-Thema ( https://material-ui.com/customization/theming/#a-note-on-performance ) im selben Renderer (App.js / return ..) hatte. als "Ergebniskomponente" SummaryAppBarPure
Die Lösung bestand darin, den ThemeProvider um eine Ebene nach oben zu heben (Index.js) und die App-Komponente hier zu verpacken, um den ThemeProvider nicht zu zwingen, neu zu berechnen und zu zeichnen / Layout / Reflow.
Vor
in App.js:
in index.js
nach
in App.js:
in index.js
quelle
Ein erzwungener Reflow tritt häufig auf, wenn Sie eine Funktion vor dem Ende der Ausführung mehrmals aufgerufen haben.
Möglicherweise liegt das Problem auf einem Smartphone vor, nicht jedoch auf einem klassischen Browser.
Ich schlage vor, ein
setTimeout
zu verwenden, um das Problem zu lösen.Dies ist nicht sehr wichtig, aber ich wiederhole, das Problem tritt auf, wenn Sie eine Funktion mehrmals aufrufen und nicht, wenn die Funktion länger als 50 ms dauert. Ich denke, Sie irren sich in Ihren Antworten.
setTimeOut
basierend auf der Dauer des Verstoßes.quelle
Dies ist kein Fehler, nur eine einfache Nachricht. Um diese Nachricht auszuführen, ändern Sie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(Beispiel)in
<!DOCTYPE html>
(die Firefox-Quelle erwartet dies).Die Nachricht wurde in Google Chrome 74 und Opera 60 angezeigt. Nach dem Ändern war klar, 0 ausführlich.
Ein Lösungsansatz
quelle