Neu in Chrome 122

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist Adriana Jara. Jetzt sehen wir uns an, was es für Entwickler Neues in Chrome 122 gibt.

Storage Buckets API

Die Storage Buckets API bietet einen höheren Detaillierungsgrad für eine bessere Verwaltung des nichtflüchtigen Speichers.

Wenn dem Nutzer normalerweise der Speicherplatz auf seinem Gerät ausgeht, gehen die mit APIs wie IndexedDB oder localStorage gespeicherten Daten verloren, ohne dass der Nutzer eingreifen kann. Eine Möglichkeit, Speicher dauerhaft zu machen, ist die Verwendung der Methode persist() der StorageManager-Schnittstelle. Diese Methode zur Anforderung des nichtflüchtigen Speichers ist jedoch alles oder nichts.

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

Weitere Informationen und Codebeispiele für die Verwendung von Storage-Buckets finden Sie unter not all storage is built equal: Introducing Storage Buckets (in englischer Sprache). Dort finden Sie weitere Details und Codebeispiele.

Verbesserungen der Entwicklertools im Bereich „Leistung“

In den Entwicklertools von Chrome 122 werden im Bereich Leistung die folgenden Verbesserungen vorgenommen.

Erstens können Sie jetzt auf der Zeitachse oben im Steuerfeld Leistung Klickpfade festlegen und zwischen ihnen wechseln. Wenn Sie einen Navigationspfad festlegen möchten, wählen Sie auf der Zeitachse einen Bereich aus, bewegen Sie den Mauszeiger darauf und klicken Sie auf die entsprechende Schaltfläche N ms zoom_in. Sie können mehrere verschachtelte Navigationspfade hintereinander erstellen. Wenn Sie zwischen den Zoomstufen wechseln möchten, klicken Sie auf den entsprechenden Navigationspfad in der Kette oberhalb der Zeitachse. Im nächsten Video sehen Sie, wie Navigationspfade dargestellt werden.

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

  • Stil- oder Layoutentwertung -> Stile neu berechnen oder Layout
  • Animationsframe anfordern > Ausgelöste Animationsframe
  • Callback bei Inaktivität anfordern -> Callback bei Inaktivität auslösen
  • Timer installieren -> Timer ausgelöst
  • Create WebSocket -> Send... (WebSocket erstellen) und Receive WebSocket Handshake (WebSocket-Handshake empfangen) oder WebSocket löschen

Um die Pfeile zu sehen, suchen Sie im Trace nach einem solchen Ereignis und klicken Sie darauf.

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

Weitere Updates zu den Entwicklertools finden Sie hier.

unsanitized-Option der Async Clipboard API

Beim Kopieren und Einfügen mit der Async Clipboard API kann die Option unsanitized für die read()-Methode dafür sorgen, 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 asynchronen API wird standardmäßig der Sanitizer aufgerufen, um Inhalte aus Sicherheitsgründen aus dem HTML-Markup zu entfernen. Die Stile werden dann in den resultierenden HTML-Code eingefügt. Dies führt zu einer großen HTML-Nutzlast und 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.

Eingang:

<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 der Option unsanitized:

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

Weitere Informationen zu den Grundlagen der Clipboard API finden Sie unter Blockierung des Zugriffs auf die Zwischenablage aufheben.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • In CSS stimmen Containerabfragen mit nicht unterstützten Funktionen nie überein. Die folgende Abfrage wird beispielsweise aufgrund des unbekannten Features nie zu Übereinstimmungen führen:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() hat keine Auswirkungen auf Dateiobjekte, sondern löscht nur Textobjekte.

  • Mit drawingBufferStorage von WebGL können Sie zusätzliche Kopien vermeiden, wenn Sie das Rendering in das standardmäßige Zwischenspeicherformat für Zeichnungen umwandeln und Inhalte mit einer Genauigkeit von mehr als 8 Bit zeichnen.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 122.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Hallo Adriana Jara, und sobald Chrome 123 veröffentlicht wird, informiere ich dich über die Neuheiten in Chrome.