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

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 .

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

• Ziemlich viel; Ich habe keine vollständige Liste erstellt, aber Tony Gentilcores Layout Triggering List 2011 wies auf einige hin.

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.

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.

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

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.

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:

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:

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

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.

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 CSSposition: sticky

Sie können dies in der Filterleiste der Konsole mit dem Kontrollkästchen Verstöße ausblenden ausblenden .

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

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

Beispiel für eine Fehlermeldung:

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.

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

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.

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