Novidades no Chrome 122

Adriana Jara

Veja o que é necessário saber:

Sou Adriana Jara. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 122.

a API Storage Buckets.

A API Storage Buckets oferece mais granularidade para gerenciar melhor o armazenamento permanente.

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 forma de tornar o armazenamento permanente é usar o método persist() da interface StorageManager. No entanto, esse método de solicitar que o armazenamento seja persistente é tudo ou nada

A ideia central da API Storage Buckets é conceder aos sites a capacidade de criar vários buckets de armazenamento, em que o navegador pode excluir cada bucket independentemente dos outros buckets. Assim, é possível especificar a priorização de remoções 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 igual: introduzindo buckets do Storage para mais detalhes e amostras de código para começar a usar esses buckets.

Melhorias no DevTools no Painel de desempenho

No Chrome 122, as DevTools incluem as melhorias abaixo no painel Performance.

Primeiro, a Linha do tempo na parte de cima do painel Desempenho permite definir a navegação estrutural e alternar entre eles. Para definir a navegação estrutural, selecione um intervalo na Linha do tempo, passe o cursor sobre ele e clique no botão N ms zoom_in correspondente. É possível criar várias localizações atuais aninhadas em sequência. Para mudar de nível de zoom, clique na localização atual correspondente na corrente na parte de cima da Linha do tempo. Assista ao próximo vídeo para ver a navegação estrutural em ação.

Além disso, agora há iniciadores de eventos na faixa Main. A página Desempenho > Por padrão, a faixa Principal mostra setas que conectam os iniciadores e os seguintes 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
  • Instalar timer -> Timer disparado
  • Criar WebSocket -> Enviar... e Receber handshake de WebSocket ou Destruir WebSocket

Para ver as setas, encontre esse evento no rastreamento e clique nele.

Uma seta saindo da solicitação e disparando um callback inativo.

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 do método read() permite que apps e sites recebam HTML não limpo. 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, a limpeza é invocada para remover o conteúdo da marcação HTML por questões de segurança, e os estilos são embutidos no HTML resultante. Isso leva a um grande payload de HTML e à perda de fidelidade do conteúdo HTML quando lido por desenvolvedores Web ou aplicativos para dispositivos móveis.

Observe a diferença na saída no exemplo a seguir.

Entrada:

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

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

Visite Como desbloquear o acesso à área de transferência para aprender as noções básicas da API Clipboard.

E muito mais.

É claro que há muito mais.

  • No CSS, as consultas de contêiner com recursos não compatíveis nunca são correspondentes. Por exemplo, a consulta a seguir nunca corresponderão devido ao recurso desconhecido:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() não afeta objetos File, apenas exclui objetos de tipo de texto.

  • Com o drawingBufferStorage do WebGL, você pode evitar uma cópia extra ao converter a renderização para o formato de pixel do buffer de desenho padrão e desenhar conteúdo com mais de 8 bits de precisão.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links a seguir para mudanças adicionais no Chrome 122.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Adriana Jara! Assim que o Chrome 123 for lançado, estarei aqui para contar as novidades do Chrome!