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 eine detailliertere Verwaltung des nichtflüchtigen Speichers.

Wenn der Nutzer auf seinem Gerät keinen Speicherplatz mehr hat, 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, wie Breadcrumbs funktionieren.

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

  • Stil- oder Layoutfehler -> Stile neu berechnen oder Layout
  • Animationsframe anfordern -> Animationsframe ausgelöst
  • Inaktiven Callback anfordern -> Inaktiven Callback auslösen
  • Timer installieren -> Timer ausgelöst
  • WebSocket erstellen -> Senden… und WebSocket-Handshake empfangen oder WebSocket schließen

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

Beim Kopieren und Einfügen mit der Async Clipboard API können Apps und Websites mit der Option unsanitized für die Methode read() nicht bereinigte HTML-Dateien abrufen. Wenn Websites diese Property nicht enthalten, wird das Lesen von HTML-Code aus der Zwischenablage bereinigt.

Wenn text/html-MIME-Typen mit der Async API gelesen werden, wird standardmäßig der Sanitizer aufgerufen, um aus Sicherheitsgründen Inhalte aus dem HTML-Markup zu entfernen. Stile werden in das resultierende HTML-Dokument 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>

Unter Zugriff auf die Zwischenablage zulassen finden Sie die Grundlagen der Clipboard API.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • In Preisvergleichsportalen werden Containerabfragen mit nicht unterstützten Funktionen nie abgeglichen. Die folgende Abfrage wird beispielsweise aufgrund des unbekannten Elements nie mit einer Entität übereinstimmen:
@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 wichtige 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.