Novidades no Chrome 66

Pete LePage

E tem muito mais.

Meu nome é Pete LePage. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 66.

Quer a lista completa de alterações? Consulte o Lista de alterações do repositório de origem do Chromium.

Modelo de objeto tipado do CSS

Se você já atualizou uma propriedade CSS por JavaScript, usou o CSS modelo de objeto. mas retorna tudo como uma string.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

Para animar a propriedade opacity, seria preciso converter a string em um número, incrementar o valor e aplicar as alterações. Não é exatamente o ideal.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Com o novo modelo de objetos tipados de CSS, os valores CSS são expostos conforme digitados objetos JavaScript, eliminando grande parte da manipulação de tipo e fornecendo uma maneira mais prática de trabalhar com CSS.

Em vez de usar element.style, você acessa os estilos pela propriedade .attributeStyleMap ou .styleMap. Eles retornam um objeto semelhante a um mapa. que facilite a leitura ou atualização.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Em comparação com o modelo de objeto CSS antigo, os primeiros comparativos mostram cerca de 30% de melhoria nas operações por segundo, algo que é especialmente importante para animações JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Isso também ajuda a eliminar bugs causados por esquecer de transmitir o valor de uma a um número e processa automaticamente o arredondamento e o fechamento de e a distribuição dos valores dos dados. Além disso, há alguns métodos novos para lidar com as unidades conversões, aritmética e igualdade.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric fez uma ótima postagem com várias demonstrações e exemplos explicação.

API Async Clipboard

const successful = document.execCommand('copy');

Cópia síncrona e colar usando document.execCommand pode ser aceitável para texto partes de texto, mas há uma boa chance de que seja síncrono a natureza bloqueará a página, causando uma experiência ruim para o usuário. E o modelo de permissão entre navegadores é inconsistente.

A nova API Async Clipboard é uma substituição que funciona de maneira assíncrona. integra-se com a API de permissão para fornecer uma melhor experiência para os usuários.

Para copiar o texto para a área de transferência, chame writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Como essa API é assíncrona, a função writeText() retorna uma promessa que serão resolvidas ou rejeitadas dependendo do texto que transmitimos foi copiado com sucesso.

Da mesma forma, o texto pode ser lido na área de transferência chamando getText() e aguardando a resolução da promessa retornada com o texto.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Confira a postagem e as demonstrações de Jason na explicação. Ele também tem exemplos que usam funções async.

Novo contexto da tela BitmapRenderer

O elemento canvas permite manipular gráficos no nível de pixel, você pode podem desenhar gráficos, manipular fotos ou até mesmo processar vídeos em tempo real. No entanto, a menos que você esteja começando com uma canvas em branco, é necessária uma maneira de renderizar uma imagem no canvas.

Historicamente, isso significa criar uma tag image e processá-la para o canvas. Infelizmente, isso significa que o navegador precisa armazenar várias cópias da imagem na memória.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

A partir do Chrome 66, há um novo contexto de renderização assíncrona que é simplificou a exibição de objetos ImageBitmap. Agora, eles renderizam mais de forma eficiente e com menos instabilidade, trabalhando de modo assíncrono e evitando o uso de memória duplicação.

Para usá-lo:

  1. Chame createImageBitmap e entregue um blob de imagem para criar a imagem.
  2. Acesse o contexto bitmaprenderer do canvas.
  3. Depois, transfira a imagem para dentro dela.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Pronto, a imagem foi renderizada.

AudioWorklet

Os Worklets estão dentro! O PaintWorklet, fornecido no Chrome 65, está sendo ativado. AudioWorklet por padrão no Chrome 66. Esse novo tipo de Worklet pode ser usado para processar áudio na linha de execução dedicada, substituindo o script ScriptProcessorNode legado que é executado na linha de execução principal. Cada AudioWorklet é executado em um escopo global próprio, reduzindo a latência e aumentando a estabilidade da capacidade de processamento.

Há alguns exemplos interessantes do AudioWorklet Labs do Google Chrome.

E muito mais.

Estas são apenas algumas das mudanças do Chrome 66 para os desenvolvedores, obviamente, há muito mais.

  • TextArea e Select agora oferecem suporte ao atributo autocomplete.
  • A definição de autocapitalize em um elemento form será aplicada a qualquer formulário filho do Safari, melhorando a compatibilidade com a implementação do Safari autocapitalize:
  • trimStart() e trimEnd() agora estão disponíveis como a forma baseada em padrões de cortar espaços em branco das strings.

Confira as Novidades do Chrome DevTools, para conhecer as novidades do DevTools no Chrome 66. E, caso tenha interesse Apps Web Progressivos, confira o novo Série de vídeos PWA Roadshow. Em seguida, clique no botão Inscrever-se na nossa Canal do YouTube você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 67 for lançado, terei certeza aqui para contar as novidades do Google Chrome.