Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 77

Pete LePage

O Chrome 77 está sendo lançado!

Há uma maneira melhor de acompanhar o desempenho do site com a Maior exibição de conteúdo.
Os Formulários recebem alguns novos recursos.
Chegou o carregamento lento nativo.
O Chrome DevSummit 2019 vai acontecer de 11 a 12 de novembro de 2019.
E muito mais.

Eu sou Pete LePage, conheça as novidades para desenvolvedores do Chrome 77!

Maior exibição de conteúdo

Entender e avaliar o desempenho real do seu site pode ser difícil. Métricas como load ou DOMContentLoaded não informam o que o usuário está vendo na tela. "Primeira exibição" e "Primeira exibição de conteúdo" capturam apenas o início da experiência. A Primeira pintura significativa é melhor, mas é complexa e, às vezes, errada.

A API Maior Contentful Paint, disponível a partir do Chrome 77, informa o tempo de renderização do maior elemento de conteúdo visível na janela de visualização e possibilita medir quando o conteúdo principal da página é carregado.

Para medir a Maior exibição de conteúdo, use um Observador de desempenho e procure eventos largest-contentful-paint.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

Como uma página geralmente é carregada em etapas, é possível que o maior elemento dela mude. Portanto, informe apenas o último evento largest-contentful-paint ao serviço de análise.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Phil fez uma ótima postagem sobre a Maior exibição de conteúdo no web.dev.

Novos recursos de formulários

Muitos desenvolvedores criam controles de formulário personalizados para personalizar a aparência de elementos já existentes ou criar novos controles que não são integrados ao navegador. Normalmente, isso envolve o uso de JavaScript e elementos <input> ocultos, mas essa não é a solução perfeita.

Dois novos recursos da Web, adicionados no Chrome 77, facilitam a criação de controles de formulário personalizados e removem as muitas limitações existentes.

O evento `formdata`

O evento formdata é uma API de baixo nível que permite que qualquer código JavaScript participe do envio de um formulário. Para usá-lo, adicione um listener de eventos formdata ao formulário com que você quer interagir.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

Quando o usuário clica no botão "Enviar", o formulário dispara o evento formdata, que inclui um objeto FormData que contém todos os dados que estão sendo enviados. Em seguida, no manipulador de eventos formdata, é possível atualizar ou modificar o formdata antes de ser enviado.

Elementos personalizados associados ao formulário

Os elementos personalizados associados ao formulário ajudam a preencher a lacuna entre os elementos personalizados e os controles nativos. Adicionar uma propriedade formAssociated estática instrui o navegador a tratar o elemento personalizado como todos os outros elementos de formulário. Também é necessário adicionar propriedades comuns encontradas nos elementos de entrada, como name, value e validity, para garantir consistência com os controles nativos.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Confira Controles de formulário mais eficientes em web.dev para saber mais detalhes.

Carregamento lento nativo

Não sei como perdi o carregamento lento nativo no meu último vídeo. É incrível, então vou incluí-lo agora. O carregamento lento é uma técnica que permite adiar o carregamento de recursos não essenciais, como <img>s ou <iframe> fora da tela, até que sejam necessários, melhorando o desempenho da página.

A partir do Chrome 76, o navegador lida com o carregamento lento para você, sem a necessidade de escrever um código personalizado ou usar uma biblioteca JavaScript separada.

Para informar ao navegador que você quer uma imagem ou um iframe com carregamento lento, use o atributo loading="lazy". Imagens e iframes que estão "acima da dobra" são carregados normalmente. E as que estão abaixo são buscadas apenas quando o usuário rola perto deles.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

Para mais detalhes, consulte Carregamento lento no nível do navegador para a Web em web.dev.

Conferência de Desenvolvedores Chrome 2019

A Conferência de Desenvolvedores do Chrome vai acontecer nos dias 11 e 12 de novembro.

É uma ótima oportunidade para saber mais sobre as últimas ferramentas e atualizações que chegam à plataforma da Web e receber diretamente a equipe de engenharia do Chrome.

Ela será transmitida ao vivo pelo nosso canal do YouTube. Se você quiser participar presencialmente, solicite seu convite no site do Chrome Dev Summit 2019.

E muito mais.

Essas são apenas algumas das mudanças no Chrome 77 para desenvolvedores. É claro, há muito mais.

A API Contact Picker, disponível como um teste de origem, é um novo seletor sob demanda que permite que os usuários escolham uma ou mais entradas da lista de contatos e compartilhem detalhes limitados dos contatos selecionados com um site.

Também há novas unidades de medida na API intl.NumberFormat.