Verletzung Die lange laufende JavaScript-Aufgabe dauerte xx ms

329

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
procatmer
quelle
Wo sehen Sie diese Warnung? Sie sagen nicht, in welcher Umgebung Sie arbeiten. Angenommen, ein Browser, aber welcher usw.?
Sami Kuhmonen
3
@SamiKuhmonen Entschuldigung, ich habe meine Frage aktualisiert. Ich habe Chrome verwendet. Ich habe keinen ähnlichen Fehler bei Edge gefunden.
Procatmer
8
Ich wollte nur hinzufügen, dass diese Warnmeldung, die Ende 2016 eingeführt wurde, möglicherweise auch aufgrund von Erweiterungen angezeigt wird, die Sie möglicherweise in Chrome installiert haben. Es ist einfach, dies zu überprüfen, indem Sie im privaten Modus testen.
Fer
1
Wenn Sie auf den Link auf der rechten Seite klicken und das Skript angeben, in dem die Verstöße auftreten, gelangen Sie an die Stelle im Code, an der sie auftreten.
Bluehipy
Ich verwende Ionic 4 (Angular 8), mein Code hat einwandfrei funktioniert, plötzlich kam diese Art von Verletzung - es sind jetzt keine Daten in meiner Liste?
Kapil Raghuwanshi

Antworten:

278

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.

plötzlich erscheint es, wenn jemand anderes an dem Projekt beteiligt ist

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:

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

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. Schneiden Sie einige / alle dieser Aufgaben aus, die möglicherweise unnötig sind
  2. Finden Sie heraus, wie Sie dieselbe Aufgabe schneller erledigen können
  3. Teilen Sie den Code in mehrere asynchrone Schritte

(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:

setTimeout(functionToRunVerySoonButNotNow);

oder

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);

Weitere Informationen zur Asynchronität von JavaScript finden Sie hier .

Voltrevo
quelle
16
Nur ein Vorschlag, anstatt zu verwenden performance.now(), könnten Sie verwenden console.time( developer.mozilla.org/en-US/docs/Web/API/Console/time ) console.time('UniquetLabelName') ....code here.... console.timeEnd('UniqueLabelName')
denislexic
@denislexic Ich denke schon. Ich bin mir nicht sicher, welchen Wert das wirklich bringt. Ich würde argumentieren, dass es wertvoller ist, etwas über die zugrunde liegende Operation zu lernen, um die aktuelle Zeit zu ermitteln und darauf aufzubauen.
Voltrevo
34
Tolle Antwort, Voltrevo! Meine Frage ist, wenn Code wie dieser eine Verletzung ist, gegen was genau verstößt er? Es muss eine Art Standard geben, den Google anwendet, aber ist dieser Standard irgendwo öffentlich dokumentiert?
Bungler
1
@Bungler Keine Ahnung, ich würde gerne wissen, ob es auch eine Richtlinie gibt, auf die es sich bezieht.
Voltrevo
3
@Bungler Ich kann nur vermuten, dass der animierte Code gegen die Bereitstellung von mindestens 60 Bildern pro Sekunde verstößt und daher eine schlechte Benutzererfahrung bietet. .
user895400
89

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:

Was erzwingt Layout / Reflow

Alle unten aufgeführten Eigenschaften oder Methoden veranlassen den Browser, wenn er in JavaScript angefordert / aufgerufen wird, den Stil und das Layout * synchron zu berechnen. Dies wird auch als Reflow- oder Layout-Thrashing bezeichnet und ist ein häufiger Leistungsengpass.

Element

Box-Metriken
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight,elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth,elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
Scroll Zeug
  • elem.scrollBy(), elem.scrollTo()
  • elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
  • elem.scrollWidth, elem.scrollHeight
  • elem.scrollLeft, elem.scrollTopAuch, sie einzustellen
Fokus
  • elem.focus() kann ein doppelt erzwungenes Layout auslösen ( Quelle )
Ebenfalls…
  • elem.computedRole, elem.computedName
  • elem.innerText( Quelle )

getComputedStyle

window.getComputedStyle()erzwingt normalerweise eine Neuberechnung des Stils ( Quelle )

window.getComputedStyle() Erzwingt auch das Layout, wenn eine der folgenden Bedingungen erfüllt ist:

  1. Das Element befindet sich in einem Schattenbaum
  2. Es gibt Medienabfragen (Ansichtsfenster-bezogene). Genauer gesagt, eine der folgenden Möglichkeiten : ( Quelle ) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio,max-aspect-ratio
    • device-pixel-ratio, resolution,orientation
  3. Die angeforderte Eigenschaft ist eine der folgenden: ( Quelle )
    • height, width * top, right, bottom, left * margin[ -top, -right, -bottom, -left, Oder eine Abkürzung ] nur , wenn der Rand befestigt ist. * padding[ -top, -right, -bottom, -left, Oder Kurzschrift ] nur dann , wenn die Polsterung befestigt ist. * transform, transform-origin, perspective-origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx,ry

Fenster

  • window.scrollX, window.scrollY
  • window.innerHeight, window.innerWidth
  • window.getMatchedCSSRules() erzwingt nur Stil

Formen

  • inputElem.focus()
  • inputElem.select(), textareaElem.select()( Quelle )

Mausereignisse

  • mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY ( Quelle )

dokumentieren

  • doc.scrollingElement erzwingt nur Stil

Angebot

  • range.getClientRects(), range.getBoundingClientRect()

SVG

zufriedenstellbar

  • Viele, viele Dinge,… einschließlich des Kopierens eines Bildes in die Zwischenablage ( Quelle )

Ü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:

Reflow ist der Name des Webbrowser-Prozesses zum Neuberechnen der Positionen und Geometrien von Elementen im Dokument, um einen Teil oder das gesamte Dokument neu zu rendern. Da Reflow eine benutzerblockierende Operation im Browser ist, ist es für Entwickler hilfreich zu verstehen, wie die Reflow-Zeit verbessert werden kann, und auch die Auswirkungen verschiedener Dokumenteigenschaften (DOM-Tiefe, CSS-Regeleffizienz, verschiedene Arten von Stiländerungen) auf den Reflow zu verstehen Zeit. Manchmal erfordert das erneute Fließen eines einzelnen Elements im Dokument das erneute Fließen seiner übergeordneten Elemente und aller darauf folgenden Elemente.

Außerdem wird erklärt, wie dies minimiert werden kann:

  1. Reduzieren Sie unnötige DOM-Tiefen. Änderungen auf einer Ebene im DOM-Baum können Änderungen auf jeder Ebene des Baums verursachen - bis zur Wurzel und bis hinunter zu den untergeordneten Elementen des geänderten Knotens. Dies führt dazu, dass mehr Zeit für die Durchführung des Reflow aufgewendet wird.
  2. Minimieren Sie CSS-Regeln und entfernen Sie nicht verwendete CSS-Regeln.
  3. Wenn Sie komplexe Renderänderungen wie Animationen vornehmen, tun Sie dies außerhalb des Ablaufs. Verwenden Sie dazu Position-Absolut oder Positions-Fest.
  4. Vermeiden Sie unnötig komplexe CSS-Selektoren - insbesondere Nachkommen-Selektoren -, die mehr CPU-Leistung benötigen, um den Selektorabgleich durchzuführen.
Anfänger
quelle
1
Weitere Hintergrundinformationen: Der Chromium-Quellcode aus der ursprünglichen Ausgabe und eine Diskussion über eine Leistungs-API für die Warnungen.
Robocat
1
Demnach löst das einfache Lesen von element.scrollTop einen Reflow aus. Dies erscheint mir als kontraintuitives Phänomen. Ich kann verstehen, warum das Setzen von element.scrollTop einen Reflow auslösen würde, aber einfach seinen Wert lesen würde. Kann jemand weiter erklären, warum dies der Fall ist, wenn dies tatsächlich der Fall ist?
David Edwards
29

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 checkouteinige 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.

Therobinkim
quelle
Vielen Dank für Ihre Antwort. Ich habe die Hälfte entfernt und sogar meine Haupt-JS-Datei aus dem Projekt ausgeschlossen. irgendwie ist der fehler immer noch aufgetreten. Deshalb bin ich so frustrierend. und ja, ich benutze git. Ich habe diesen Fehler heute gerade erkannt. Seit dies zu einem Gruppenprojekt wurde, gab es viele Verpflichtungen. könnte eine gründliche Überprüfung durchführen. Nochmals vielen Dank für die Ideen.
Procatmer
@procatmer verwenden dieselbe Strategie wie beim Finden des Git-Commits. Wenn ich zum Beispiel 10 Commits hätte (A, B, C, D, E, F, G, H, I, J), bei denen A das älteste war, würde ich git checkout Esehen, 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.
Therobinkim
1
@procatmer Auch wenn Sie Ihre Hauptdatei weggelassen haben .jsund 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)?
Therobinkim
1
Ich habe endlich herausgefunden, wo das Problem liegt. Ich habe Ihre zweite Idee verwendet, um die Änderungen zu verfolgen. und ja, das Problem kommt von einer externen .jsDatei. anscheinend ist es wichtig. es verlangsamt meine Seite ziemlich bedeutend. Trotzdem nochmals vielen Dank für Ihre Antworten und Ideen.
Procatmer
2
Sie können git bisect verwenden, um die binäre Suche anzuwenden. Ich denke, es ist nur zum Zweck der Fehlersuche.
Pietrovismara
12

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.)

Matt Leonowicz
quelle
Nein, ich habe kein AdBlock und es wird immer noch in der Konsole angezeigt.
Nikola Stojaković
Versuchen Sie, es mit der Registerkarte Leistung zu analysieren, und suchen Sie nach der Quelle der Funktionen, die lange ausgeführt werden. Dies kann alles sein, aber dies ist ein möglicher Weg, um die Ursache des Problems zu identifizieren.
Matt Leonowicz
6

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:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-aria.min.js"></script>

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.

Jordan Reddick
quelle
6

Ich habe die Wurzel dieser Nachricht in meinem Code gefunden, der Knoten gesucht und versteckt oder angezeigt hat (offline). Das war mein Code:

search.addEventListener('keyup', function() {
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            node.classList.remove('hidden');
        else
            node.classList.add('hidden');
});

Die Registerkarte Leistung (Profiler) zeigt das Ereignis an, das ungefähr 60 ms dauert: Reflow für die Neuberechnung des Chromium Performance Profiler-Layouts

Jetzt:

search.addEventListener('keyup', function() {
    const nodesToHide = [];
    const nodesToShow = [];
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            nodesToShow.push(node);
        else
            nodesToHide.push(node);

    nodesToHide.forEach(node => node.classList.add('hidden'));
    nodesToShow.forEach(node => node.classList.remove('hidden'));
});

Die Registerkarte Leistung (Profiler) zeigt nun das Ereignis an, das ungefähr 1 ms dauert: Chrom Profiler dunkel

Und ich habe das Gefühl, dass die Suche jetzt schneller funktioniert (229 Knoten).

Vitaly Zdanevich
quelle
3
Zusammenfassend lässt sich sagen, dass Sie durch den Erhalt der Verletzung Ihren Code optimieren konnten und er jetzt eine bessere Leistung erbringt.
Benutzer, der kein Benutzer ist
3

Ich habe eine Lösung im Apache Cordova-Quellcode gefunden. Sie implementieren wie folgt:

var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };

Einfache Implementierung, aber kluger Weg.

Verwenden Sie über Android 4.4 Promise. Verwenden Sie für ältere BrowsersetTimeout()


Verwendungszweck:

nextTick(function() {
  // your code
});

Nach dem Einfügen dieses Trickcodes sind alle Warnmeldungen verschwunden.

wf9a5m75
quelle
2

Wenn Sie Chrome Canary (oder Beta) verwenden, aktivieren Sie einfach die Option "Verstöße ausblenden".

Kontrollkästchen "Verstöße ausblenden" in der Chrome 56-Konsole

zhaoming
quelle
1

Dies ist ein Verstoßfehler von Google Chrome, der anzeigt, wann die VerboseProtokollierungsstufe aktiviert ist.

Beispiel für eine Fehlermeldung:

Screenshot der Warnung

Erläuterung:

Reflow ist der Name des Webbrowser-Prozesses zum Neuberechnen der Positionen und Geometrien von Elementen im Dokument, um einen Teil oder das gesamte Dokument neu zu rendern. Da Reflow eine benutzerblockierende Operation im Browser ist, ist es für Entwickler hilfreich zu verstehen, wie die Reflow-Zeit verbessert werden kann, und auch die Auswirkungen verschiedener Dokumenteigenschaften (DOM-Tiefe, CSS-Regeleffizienz, verschiedene Arten von Stiländerungen) auf den Reflow zu verstehen Zeit. Manchmal erfordert das erneute Fließen eines einzelnen Elements im Dokument das erneute Fließen seiner übergeordneten Elemente und auch aller darauf folgenden Elemente.

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.

Paul-Sebastian Manole
quelle
0

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)

  • Die Platzierung eines benutzerdefinierten Theme-Anbieters war die Ursache

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:

  return (
    <>
      <MyThemeProvider>
      <Container className={classes.appMaxWidth}>

        <SummaryAppBarPure
//...

in index.js

ReactDOM.render(
  <React.StrictMode>
      <App />
//...

nach

in App.js:

return (
    <>
      {/* move theme to index. made reflow problem go away */}
      {/* <MyThemeProvider> */}
      <Container className={classes.appMaxWidth}>

        <SummaryAppBarPure
//...

in index.js

ReactDOM.render(
  <React.StrictMode>
    <MyThemeProvider>
      <App />
//...
JimiSweden
quelle
-2

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 setTimeoutzu 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.

  1. Deaktivieren Sie 1-zu-1-Aufrufe und laden Sie den Code neu, um festzustellen, ob der Fehler weiterhin auftritt.
  2. Wenn ein zweites Skript den Fehler verursacht, verwenden Sie a setTimeOutbasierend auf der Dauer des Verstoßes.
Cherif
quelle
Dies ist keine Lösung. Es ist ein Vorschlag, der besser als Kommentar zur ursprünglichen Frage hinterlassen wird.
Paul-Sebastian Manole
-6

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

Gerdixx
quelle
5
Nur ein paar Ratschläge: Ihre Antwort hat nichts mit den Fragen zu tun. Korrigieren Sie entweder Ihre Antwort oder entfernen Sie sie. Die Frage lautete: "Warum zeigt die Chrome-Browserkonsole eine Warnung vor Verstößen an?" Die Antwort ist, dass es sich um eine Funktion in neueren Chrome-Browsern handelt, bei der Sie benachrichtigt werden, wenn die Webseite während der Ausführung von JS übermäßige Browser-Reflows verursacht. Weitere Informationen finden Sie in dieser Ressource von Google .
Paul-Sebastian Manole