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
![Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]](/upload/images/67cac6b1480bd.webp)
Artikel empfehlen
Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können
Inhaltsverzeichnis 1. Aufgetretene Probleme 2. An...
Lösungen für Dateien/Ordner, die unter Linux nicht gelöscht werden können
Vorwort Kürzlich wurde unser Server von Hackern a...
Verschieben Sie die MySQL-Datenbank unter Windows auf eine andere Festplatte
Vorwort Heute habe ich MySQL installiert und fest...
Detaillierte Erklärung des Synchronisierungsmodifikators von Vue
Inhaltsverzeichnis 1. Anweisungen 2. Modifikatore...
MySQL Series II-Konfiguration für mehrere Instanzen
Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...
Detaillierte Erläuterung des Konfigurationsprozesses des Docker-Container-Netzwerkports
Netzwerk-Ports freigeben Tatsächlich gibt es in D...
Sechs merkwürdige und nützliche Dinge über JavaScript
Inhaltsverzeichnis 1. Dekonstruktionstipps 2. Dig...
Beispiel für Formularaktion und „onSubmit“
Erstens: Aktion ist ein Attribut des Formulars. HT...
Vue2.x konfiguriert Routing-Navigations-Guards, um die Benutzeranmeldung und -beendigung zu implementieren.
Inhaltsverzeichnis Vorwort 1. Konfigurieren Sie d...
Der Unterschied zwischen VOLUME und docker -v in Dockerfile
Es gibt offensichtliche Unterschiede zwischen der...
Der Implementierungsprozess der ECharts Multi-Chart-Verknüpfungsfunktion
Wenn viele Daten angezeigt werden müssen, ist die...
Zusammenfassung einiger gängiger Schreibmethoden, die zu MySQL-Indexfehlern führen
Vorwort Vor kurzem war ich damit beschäftigt, ein...
Tutorial zur Installation der Internetzugriffskonfiguration für Linux 7.2 auf einer virtuellen VMware-Maschine unter Win7
Installieren Sie die Linux7.2-Internetzugriffskon...
MySQL-Schleife fügt zig Millionen Daten ein
1. Erstellen Sie eine Testtabelle Tabelle `mysql_...
CSS-Klicks auf das Radio wechseln zwischen zwei Bildstilen und nur eines der mehreren Radios kann aktiviert werden
Wir implementieren einen roten Bildstil für die a...