Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 122

Adriana Jara

Dit is wat u moet weten:

Verbeter het opslagbeheer met de Storage Buckets API .
Er zijn DevTools- verbeteringen in het Prestatiepaneel .
Kies ervoor om de nauwkeurigheid te behouden bij het kopiëren en plakken van HTML met behulp van de nieuwe Async Clipboard API unsanitized -optie .
En er is nog veel meer .

Ik ben Adriana Jara. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 122.

API voor opslagbuckets.

De Storage Buckets API biedt meer granulariteit om permanente opslag beter te beheren.

Traditioneel, als de gebruiker geen opslagruimte meer heeft op zijn apparaat, gaan de gegevens die zijn opgeslagen met API's zoals IndexedDB of localStorage verloren zonder dat de gebruiker kan ingrijpen. Eén manier om opslag persistent te maken is het gebruik van de persist() -methode van de StorageManager-interface. Deze methode om te verzoeken dat de opslag persistent is, is echter alles of niets

Het kernidee van de Storage Buckets API is dat sites meerdere opslagbuckets kunnen maken, waarbij de browser ervoor kan kiezen om elke bucket onafhankelijk van andere buckets te verwijderen. U kunt dus de prioriteit voor uitzettingen opgeven om ervoor te zorgen dat de meest waardevolle gegevens niet worden verwijderd. Elke opslagbucket kan gegevens bevatten die zijn gekoppeld aan gevestigde opslag-API's zoals IndexedDB en CacheStorage.

Bezoek niet alle opslag is gelijk: maak kennis met Storage Buckets voor meer details en codevoorbeelden om Storage Buckets te gaan gebruiken.

DevTools-verbeteringen in het prestatiepaneel

In Chrome 122 bevat DevTools de volgende verbeteringen in het prestatiepaneel .

Ten eerste kunt u nu via de tijdlijn bovenaan het prestatiepaneel broodkruimels instellen en daartussen springen. Om een broodkruimel in te stellen, selecteert u een bereik op de tijdlijn , beweegt u eroverheen en klikt u op de overeenkomstige N ms knop. U kunt meerdere geneste broodkruimels achter elkaar maken. Om tussen zoomniveaus te wisselen, klikt u op de overeenkomstige broodkruimel in de keten bovenaan de tijdlijn . Bekijk de volgende video om broodkruimels in actie te zien.

Ook zijn er nu initiatiefnemers van evenementen in het hoofdspoor . Het spoor Prestaties > Hoofd toont standaard pijlen die initiatiefnemers verbinden met de volgende gebeurtenissen die ze hebben veroorzaakt.

Ongeldigheid van stijl of lay-out -> Stijlen of lay-out opnieuw berekenen
Animatieframe aanvragen -> Animatieframe geactiveerd
Inactief terugbellen aanvragen -> Inactief terugbellen activeren
Installatietimer -> Timer geactiveerd
Maak een WebSocket -> Verzenden... en ontvang een WebSocket-handshake of vernietig WebSocket

Om de pijlen te zien, zoekt u een dergelijke gebeurtenis in de tracering en klikt u erop.

Een pijl van het verzoek en het afvuren van een inactieve callback.

Vind meer DevTools-updates in Wat is er nieuw in Devtools 122 .

Asynchrone klembord-API- `unsanitized` optie

Bij het kopiëren en plakken met de Async Clipboard API zorgt de unsanitized optie voor de read() methode ervoor dat apps en websites onopgeschoonde HTML kunnen krijgen. Tenzij sites deze eigenschap bevatten, wordt het lezen van HTML vanaf het klembord opgeschoond.

Bij het lezen van text/html MIME-typen met behulp van de asynchrone API wordt standaard de sanitizer aangeroepen om de inhoud uit de HTML-opmaak te verwijderen vanwege veiligheidsoverwegingen, en worden stijlen in de resulterende HTML inline geplaatst. Dit leidt tot een grote HTML-payload en verlies van betrouwbaarheid van HTML-inhoud wanneer deze wordt gelezen door webontwikkelaars of mobiele apps.

U kunt het verschil in de uitvoer zien in het volgende voorbeeld.

Invoer:

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

Gezuiverd (standaard):

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

Met unsanitized optie:

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

Ga naar Toegang tot het klembord opheffen voor meer informatie over de basisprincipes van de Klembord-API.

En meer!

Natuurlijk is er nog veel meer.

In CSS komen containerquery's met niet-ondersteunde functies nooit overeen. De volgende zoekopdracht komt bijvoorbeeld nooit overeen vanwege de onbekende functie:

@container (width > 0px) or (unknown) {}

dataTransfer.clearData() heeft geen invloed op File-objecten; het verwijdert alleen teksttype-objecten.
Met drawingBufferStorage van WebGL kunt u een extra kopie vermijden bij het converteren van rendering naar het standaard pixelformaat voor tekenbuffers en kunt u inhoud tekenen die meer dan 8 bits nauwkeurig is.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de volgende links voor aanvullende wijzigingen in Chrome 122.

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Yo soy Adriana Jara, en zodra Chrome 123 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!