Veja o que é necessário saber:
- Melhore o gerenciamento de armazenamento com a API Storage Buckets.
- Há melhorias nas DevTools no Painel de desempenho.
- Preserve a precisão ao copiar e colar HTML usando a nova opção
unsanitized
da API Async Clipboard. - E há muito mais.
Meu nome é Adriana Jara. Vamos conferir as novidades para desenvolvedores no Chrome 122.
API Storage Buckets.
A API Storage Buckets oferece mais granularidade para gerenciar melhor o armazenamento persistente.
Tradicionalmente, quando o usuário fica sem espaço de armazenamento no dispositivo, os dados armazenados com APIs como IndexedDB ou localStorage
são perdidos sem que o usuário possa intervir. Uma maneira de tornar o armazenamento persistente é usar o método persist()
da interface StorageManager. No entanto, esse método de solicitação de armazenamento persistente é tudo ou nada.
A ideia principal da API Storage Buckets é permitir que os sites criem vários buckets de armazenamento, em que o navegador pode excluir cada bucket de forma independente. Assim, é possível especificar a priorização de exclusão para garantir que os dados mais valiosos não sejam excluídos.Cada bucket de armazenamento pode conter dados associados a APIs de armazenamento estabelecidas, como IndexedDB e CacheStorage.
Acesse nem todo armazenamento é criado da mesma forma: introdução aos buckets de armazenamento para mais detalhes e exemplos de código para começar a usar os buckets de armazenamento.
Melhorias nas DevTools no painel de desempenho
No Chrome 122, as DevTools incluem as seguintes melhorias no painel Performance.
Primeiro, a linha do tempo na parte de cima do painel Performance agora permite definir e pular entre os breadcrumbs. Para definir um breadcrumb, selecione um intervalo na Linha do tempo, passe o cursor sobre ele e clique no botão N ms
correspondente. É possível criar várias trilhas de navegação aninhadas em sucessão. Para pular entre os níveis de zoom, clique no caminho de navegação correspondente na cadeia na parte de cima da Linha do tempo. Assista ao próximo vídeo para ver os indicadores de caminho no site em ação.Além disso, agora há iniciadores de eventos na faixa Principal. A faixa Performance > Principal mostra, por padrão, setas que conectam os iniciadores e os eventos que eles causaram.
- Invalidação de estilo ou layout: Recalcular estilos ou Layout
- Solicitar frame de animação -> Frame de animação disparado
- Solicitar callback inativo -> Disparar callback inativo
- Install Timer -> Timer Fired
- Criar WebSocket Enviar e Receber handshake de WebSocket ou Destruir WebSocket
Para ver as setas, encontre um evento no trace e clique nele.
Confira mais atualizações do DevTools em Novidades do DevTools 122.
Opção unsanitized
da API Async Clipboard
Ao copiar e colar usando a API Async Clipboard, a opção unsanitized
para o método read()
permite que apps e sites recebam HTML não higienizado. A menos que os sites incluam essa propriedade, a leitura de HTML da área de transferência será limpa.
Por padrão, ao ler tipos MIME text/html
usando a API assíncrona, o limpador é invocado para remover o conteúdo da marcação HTML devido a problemas de segurança, e os estilos são inline no HTML resultante.
Isso leva a um payload HTML grande e à perda de fidelidade do conteúdo HTML quando lido por desenvolvedores da Web ou apps para dispositivos móveis.
Confira a diferença na saída no exemplo a seguir.
Entrada:
<style>p { color: blue; }</style><p>Hello, World!</p>'
Limpo (padrão):
<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>
Com a opção unsanitized
:
<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>
Acesse Como desbloquear o acesso à área de transferência para aprender o básico sobre a API Clipboard.
E muito mais.
Claro que há muito mais.
- No CSS, as consultas de contêiner com recursos sem suporte nunca correspondem. Por exemplo, a consulta a seguir nunca vai corresponder devido ao recurso desconhecido:
@container (width > 0px) or (unknown) {}
dataTransfer.clearData() não afeta objetos File, apenas exclui objetos do tipo texto.
Com o
drawingBufferStorage
do WebGL, é possível evitar uma cópia extra ao converter a renderização para o formato de pixel de buffer de desenho padrão e renderizar conteúdo com mais de 8 bits de precisão.
Leitura adicional
Isso abrange apenas alguns destaques importantes. Confira os links a seguir para ver outras mudanças no Chrome 122.
- Novidades do Chrome DevTools (122)
- Remoção e descontinuação de recursos do Chrome 122
- Atualizações do ChromeStatus.com para o Chrome 122
- Lista de mudanças do repositório de origem do Chromium
- Calendário de lançamentos do Chrome
Inscrever-se
Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.
Meu nome é Adriana Jara, e assim que o Chrome 123 for lançado, vou falar sobre as novidades do Chrome.