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
JavaScript implementiert die asynchrone Übermittlung von Formulardaten
In diesem Artikelbeispiel wird der spezifische Ja...
So verwenden Sie die Lodop-Drucksteuerung in Vue, um browserkompatibles Drucken zu erreichen
Vorwort Dieses Steuerelement weist beim direkten ...
Allgemeine Verwendung von regulären Ausdrücken in MySQL
Allgemeine Verwendung von Regexp in Mysql Fuzzy-M...
So ändern Sie das MySQL-Tabellenpartitionierungsprogramm
So ändern Sie das MySQL-Tabellenpartitionierungsp...
So stellen Sie Redis schnell als Docker-Container bereit
Inhaltsverzeichnis Erste Schritte Datenspeicherun...
Ein kurzer Vortrag über die parasitäre Kompositionsvererbung in JavaScript
Vererbung von Kompositionen Kombinationsvererbung...
Detaillierte Erklärung langsamer MySQL-Abfragen
Informationen zu MySQL-Vorgängen abfragen Status ...
So leiten Sie innerhalb von zwei Sekunden auf andere Seiten einer HTML-Seite um
Code kopieren Der Code lautet wie folgt: <!DOC...
SQL implementiert LeetCode (180. Fortlaufende Zahlen)
[LeetCode] 180. Aufeinanderfolgende Zahlen Schrei...
Die perfekte Lösung, um das Passwort in mysql8.0.19 zu vergessen
Lesetipp: MySQL 8.0.19 unterstützt Kontosperrfunk...
Probleme und Lösungen bei der Installation von Docker in der Alibaba Cloud
Frage Bei der Installation von Docker mithilfe de...
Detailliertes Tutorial zur Installation von Docker unter Windows
Da meine lokale MySQL-Version relativ niedrig ist...
Die Vor- und Nachteile von Nginx und LVS und ihre geeignete Nutzungsumgebung
Lassen Sie uns zu Beginn darüber sprechen, was La...
So verwenden Sie Übersetzung und Übergang in CSS3
Ich habe immer das Gefühl, dass Übersetzen und Üb...
Detaillierte Erklärung des FreeList-Mechanismus von MySQL
1. Einleitung Nach dem Start von MySQL wird Buffe...