Eine Zeile CSS-Code, die Chrome zum Absturz bringt
|
Allgemeiner CSS-Code verursacht nur geringfügige Probleme mit dem UI-Layout oder der Kompatibilität. Aber hier möchten wir eine interessante CSS-Zeile teilen, die Ihre Chrome-Seite direkt zum Absturz bringen kann :) Reproduktion
Tatsächlich verfügt diese Maschine nur über 8 GB Speicher, aber das spielt keine Rolle. Im Vergleich zu der 4-GB-roten Linie, die JS zum Absturz bringt, ist CSS immer noch leistungsfähiger :) Geschichte Die Entdeckung dieser Codezeile geht auf ein seltsames Phänomen in unserem Editorprojekt bei der Implementierung der Anpassung der Leinwandgröße zurück: Wenn der Benutzer die Leinwandgröße anpasst, friert Chrome ein, sobald das Verhältnis zwischen der neuen und der alten Größe einen bestimmten Bereich überschreitet. Obwohl dieses Problem durch die Vorgehensweise normaler Benutzer nur schwer ausgelöst werden kann, sind die dadurch verursachten Folgen tatsächlich schwerwiegend. Bei der Fehlerbehebung haben wir zunächst Möglichkeiten wie JS-Blockierung und übermäßiges Neuzeichnen des DOM in Betracht gezogen, aber keines davon war das Problem. Ein Durchbruch war die Ausgabe des FPS-Meters im Rendering-Tool des Debuggers:
Hier ist der GPU-Speicher voll. Obwohl es nun offensichtlich erscheint, dass diese Eingabeaufforderungsmeldung mit der Hardwarebeschleunigung zusammenhängt, können wir ohne entsprechende Erfahrung immer noch nicht feststellen, wie sie mit dem spezifischen Code zusammenhängt. Erst als wir zufällig die Einführung in Compositing im Chrome-Designdokument sahen, entdeckten wir ein Verhalten: Blink ordnet DOM-Knoten dem Rendering-Baum von LayoutObject zu. Theoretisch kann jeder Knoten in diesem Baum den Kontext des Rendering-Backends haben, aber um Ressourcen zu sparen, führt Chrome sie vor dem Rendering zusammen. Derzeit können Elemente mit CSS-Positionierung (wie absolute Positionierung und Transformation) nicht zusammengeführt werden, was zu zusätzlichem Overhead im Videospeicher führt. Basierend auf diesen Informationen haben wir damals das Layout-Tool zum Debuggen der Seite verwendet und tatsächlich einen besonderen Ort gefunden:
Die größte rechteckige Ebene im Bild ist beim normalen DOM-Debugging nicht sichtbar. Wir vermuten daher, dass die Ursache in ihrer übermäßigen Größe und dem daraus resultierenden RAM-Overhead liegt. Basierend auf diesen Informationen haben wir schließlich einen DOM-Knoten mit angemessener Breite und Höhe gefunden, aber der Skalierungswert der Transformation wurde in der Logik möglicherweise stark geändert. Die Begrenzung der Skalierungsobergrenze kann das Problem lösen: Es ist nicht schwer festzustellen, dass zwischen dem Skalierungswert und der endgültigen entsprechenden Anzahl von Pixeln eine O(N^2)-Beziehung besteht. 1 Pixel wird nur 100-mal vergrößert und entspricht 10.000 Pixeln. Wenn der Maßstab sehr groß ist, kann es daher zu einer übermäßigen Nutzung des Arbeitsspeichers/Videospeichers kommen (natürlich führt der Browser eine Kachelung usw. durch, sodass dies unter normalen Umständen nicht der tatsächlichen Situation entspricht und bei Safari/Firefox derzeit keine Probleme auftreten). Schließlich habe ich einen Fehler bei Chrome gemeldet, siehe #894115 Zusammenfassen Es ist zu beachten, dass die oben genannten Debugging-Ideen aufgrund fehlender tiefergehender Kenntnisse des Browserkernels wahrscheinlich ungenau sind. Kurzzusammenfassung:
Oben ist eine Zeile CSS-Code, die Chrome zum Absturz bringt. Ich hoffe, sie hilft Ihnen weiter. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: So migrieren Sie das Datenverzeichnis in mysql8.0.20
>>: Konfiguration der primären Netzwerk-Portzuordnung für Docker
Artikel empfehlen
Neuer Ansatz zum Umschalten der Tab-Leiste mit zwei Auswahlmöglichkeiten in Vue
Problembeschreibung Wenn wir an einem Projekt arb...
Freundliche Alternativen zum Find Tool in Linux
Mit dem Befehl „Find“ können Sie in einem angegeb...
Detaillierte Erklärung zur Installation von CentOS7 mit der in Win10 integrierten virtuellen Maschine Hyper-V
1. Installieren Sie die virtuelle Maschine Hyper-...
Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung
Einige von Ihnen haben vielleicht gehört, dass di...
Web-Frontend-Entwicklung CSS-bezogene Teamzusammenarbeit
Die Frontend-Entwicklungsabteilung wächst, die Mi...
Detaillierte Erklärung zum manuellen Hochladen von Excel-Dateien auf den Server mit Vue ElementUI
Inhaltsverzeichnis Überblick Eigenschafteneinstel...
Eine detaillierte Einführung in die Linux-Systemkonfiguration (Dienststeuerung)
Inhaltsverzeichnis Vorwort 1. Systemdienststeueru...
MySql-Index verbessert die Abfragegeschwindigkeit allgemeine Methoden Codebeispiele
Verwenden Sie Indizes, um Abfragen zu beschleunig...
Detaillierte Erläuterung des Lese-Commits der MySQL-Transaktionsisolationsebene
MySQL-Transaktionsisolationsebene anzeigen mysql&...
So starten Sie mehrere MySQL-Instanzen in CentOS 7.0 (mysql-5.7.21)
Konfigurationsanweisungen Linux-System: CentOS-7....
TypeScript-Lernhinweise: Typeingrenzung
Inhaltsverzeichnis Vorwort Typinferenz Einengung ...
Zwei Möglichkeiten, HTML zu implementieren, um Inhaltspositionen zufällig zu verschieben
Test: Chrome v80.0.3987.122 ist normal Es gibt zw...
MySql 5.7.20 Installation und Konfiguration von Daten- und my.ini-Dateien
1. Erster Download von der offiziellen Website vo...
Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen und ihrer Verwendung
Inhaltsverzeichnis 1. Was ist eine Richtlinie? Ei...
CSS simuliert Float, um den Effekt eines zentrierten Textes zu erzielen, der das Bild links und rechts umgibt
Was ist Textumbruch um Bilder? Dies ist die Auswi...