Neu in Chrome 122

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Ich bin Adriana Jara. Sehen wir uns an, was es in Chrome 122 für Entwickler Neues gibt.

Storage Buckets API.

Die Storage Buckets API bietet einen höheren Detaillierungsgrad, um den 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 kann. Eine Möglichkeit, den Speicher dauerhaft zu speichern, ist die Verwendung der Methode persist() der StorageManager-Schnittstelle. Bei dieser Methode, die Speicherung als persistent zu definieren, ist es jedoch entweder „alles“ oder „nichts“.

Die Storage Buckets API ermöglicht es Websites, mehrere Speicher-Buckets zu erstellen, bei denen der Browser jeden Bucket unabhängig von anderen löschen kann. So können Sie eine Auslagerungspriorisierung angeben, damit die wertvollsten Daten nicht gelöscht werden.Jeder Speicher-Bucket kann Daten enthalten, die mit etablierten Speicher-APIs wie IndexedDB und CacheStorage verknüpft sind.

Unter Nicht alle Speicher sind gleich: Storage Buckets finden Sie weitere Informationen und Codebeispiele für den Einstieg in Storage Buckets.

Verbesserungen in den DevTools im Bereich „Leistung“

In Chrome 122 wurden die folgenden Verbesserungen im Bereich Leistung in den DevTools vorgenommen.

Im Bereich Leistung können Sie jetzt oben in der Zeitachse Breadcrumbs festlegen und zwischen ihnen wechseln. Wenn Sie einen Klickpfad festlegen möchten, wählen Sie einen Bereich in der Zeitachse aus, bewegen Sie den Mauszeiger darauf und klicken Sie auf die entsprechende Schaltfläche N ms . Sie können mehrere verschachtelte Breadcrumbs nacheinander erstellen. Wenn Sie zwischen Zoomebenen wechseln möchten, klicken Sie auf die entsprechende Breadcrumb-Ansicht in der Kette oben auf der Zeitachse. Im nächsten Video sehen Sie die Navigationspfade in Aktion.

Außerdem gibt es jetzt Ereignisauslöser im Haupt-Track. Unter Leistung > Haupt-Track werden standardmäßig Pfeile angezeigt, die die Initiatoren und die folgenden Ereignisse, die sie verursacht haben, verbinden.

  • Stil- oder Layoutfehler -> Stile neu berechnen oder Layout
  • Animationsframe anfordern -> Animationsframe ausgelöst
  • Inaktiven Callback anfordern -> Inaktiven Callback auslösen
  • Installations-Timer -> Timer ausgelöst
  • WebSocket erstellen -> Senden... und WebSocket-Handshake empfangen 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 das Auslösen eines Callbacks bei Inaktivität.

Weitere Informationen zu den DevTools-Updates finden Sie unter Das ist neu in DevTools 122.

Async Clipboard API unsanitized-Option

Wenn Sie mit der Async Clipboard API kopieren und einfügen, können Apps und Websites mit der Option unsanitized für die Methode read() nicht bereinigte HTML-Dateien abrufen. 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 das Sanitizer standardmäßig aufgerufen, um aufgrund von Sicherheitsbedenken Inhalte aus dem HTML-Markup zu entfernen. Die Stile werden in den resultierenden HTML-Code eingefügt. Dies führt zu einer großen HTML-Nutzlast und zu einer Beeinträchtigung der Genauigkeit von HTML-Inhalten, wenn sie 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>'

Entfernt (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>

Informationen zu den Grundlagen der Clipboard API finden Sie unter Blockierung der 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 liefert beispielsweise aufgrund des unbekannten Features keine Übereinstimmungen:
@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 eine zusätzliche Kopie vermeiden, wenn Sie das Rendering in das Standard-Pixelformat des Zeichenpuffers umwandeln und Inhalte mit einer Genauigkeit von mehr als 8 Bit zeichnen.

Weitere Informationen

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

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Adriana Jara. Sobald Chrome 123 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.