Neu in Chrome 122

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist Adriana Jara. Sehen wir uns nun an, was es bei Chrome 122 für Entwickler Neues gibt.

Storage Buckets API

Die Storage Buckets API bietet einen höheren Detaillierungsgrad, um nichtflüchtigen Speicher besser zu verwalten.

Wenn dem Nutzer der Speicherplatz auf seinem Gerät ausgeht, gehen die mit APIs wie IndexedDB oder localStorage gespeicherten Daten verloren, ohne dass der Nutzer eingreifen konnte. Eine Möglichkeit, Speicher persistent zu machen, ist die Methode persist() der StorageManager-Schnittstelle. Bei dieser Methode für die Anforderung eines persistenten Speichers geht es jedoch um alles oder nichts.

Die Kernidee der Storage Buckets API besteht darin, Websites die Möglichkeit zu geben, mehrere Storage-Buckets zu erstellen. Dabei kann der Browser jeden Bucket unabhängig von anderen Buckets löschen. So können Sie eine Priorisierung der Bereinigung festlegen, damit die wertvollsten Daten nicht gelöscht werden.Jeder Storage-Bucket kann Daten enthalten, die mit etablierten Speicher-APIs wie IndexedDB und CacheStorage verknüpft sind.

Besuchen Sie Nicht jeder Speicher ist gleich: Storage-Buckets erstellen. Dort finden Sie weitere Informationen und Codebeispiele für die Verwendung von Storage-Buckets.

Verbesserungen bei den Entwicklertools im Bereich „Leistung“

In den Chrome 122-Entwicklertools wurden im Bereich Leistung die folgenden Verbesserungen vorgenommen.

Zum einen können Sie jetzt auf der Zeitachse oben im Steuerfeld Leistung Navigationspfade festlegen und zwischen ihnen wechseln. Um einen Navigationspfad festzulegen, wählen Sie einen Bereich auf der Zeitachse aus, bewegen Sie den Mauszeiger darauf und klicken Sie auf die entsprechende Schaltfläche N ms zoom_in. Sie können mehrere verschachtelte Breadcrumbs nacheinander erstellen. Wenn Sie zwischen Zoomstufen wechseln möchten, klicken Sie über der Zeitachse auf den entsprechenden Navigationspfad in der Kette. Im nächsten Video sehen Sie die Navigationspfade in Aktion.

Außerdem gibt es jetzt im Main-Track Ereignisinitiatoren. Das Menü Leistung > Im Haupt-Track werden standardmäßig Pfeile angezeigt, die die Initiatoren und die folgenden von ihnen verursachten Ereignisse verbinden.

  • Entwertung von Stil oder Layout -> Stile neu berechnen oder Layout
  • Animationsframe anfordern -> Animationsframe ausgelöst
  • Callback bei Inaktivität anfordern -> Rückruf bei Inaktivität auslösen
  • Timer installieren -> Timer ausgelöst
  • WebSocket erstellen -> Senden... und WebSocket-Handshake erhalten oder WebSocket löschen

Wenn Sie die Pfeile sehen möchten, suchen Sie im Trace nach einem solchen Ereignis und klicken Sie darauf.

Ein Pfeil von der Anfrage und dem Auslösen eines inaktiven Callbacks.

Weitere Updates für die Entwicklertools finden Sie unter Neuerungen bei Entwicklertools 122.

unsanitized-Option der Async Clipboard API

Beim Kopieren und Einfügen mithilfe der Async Clipboard API ermöglicht die Option unsanitized für die Methode read(), dass Apps und Websites unbereinigten HTML-Code erhalten. Sofern Websites diese Eigenschaft nicht enthalten, wird das Lesen von HTML aus der Zwischenablage bereinigt.

Beim Lesen von text/html-MIME-Typen mit der Async API wird Sanitizer standardmäßig aufgerufen, um aufgrund von Sicherheitsbedenken Inhalte aus dem HTML-Markup zu entfernen, und die Stile werden in den resultierenden HTML-Code eingebettet. Dies führt zu einer großen HTML-Nutzlast und zu einem Verlust der Genauigkeit von HTML-Inhalten, wenn diese von Webentwicklern oder mobilen Apps gelesen werden.

Im folgenden Beispiel sehen Sie den Unterschied in der Ausgabe.

Eingabe:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Bereinigt (Standardeinstellung):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

Mit unsanitized-Option:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Informationen zu den Grundlagen der Clipboard API finden Sie unter Blockierung der Zwischenablage aufheben.

…und vieles mehr

Natürlich gibt es noch viele weitere.

  • In CSS stimmen Containerabfragen mit nicht unterstützten Funktionen nie überein. Die folgende Abfrage werden aufgrund der unbekannten Funktion nie abgeglichen:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() wirkt sich nicht auf Dateiobjekte aus, sondern löscht nur Objekte vom Typ Text.

  • Mit drawingBufferStorage von WebGL können Sie zusätzliche Kopie vermeiden, wenn Sie das Rendering in das Standard-Pixelformat für den Zeichenpuffer umwandeln und Inhalte mit einer Genauigkeit von mehr als 8 Bit zeichnen.

Weitere Informationen

Hier werden nur einige wichtige Punkte behandelt. Unter den folgenden Links finden Sie zusätzliche Änderungen in Chrome 122.

Abonnieren

Um immer auf dem Laufenden zu bleiben, abonniere die YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Hallo Adriana Jara, und sobald Chrome 123 veröffentlicht wird, melde ich mich, um Ihnen die Neuerungen in Chrome mitzuteilen.