Novidades do Chrome 77

Pete LePage

O Chrome 77 está sendo lançado agora!

Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 77.

Maior exibição de conteúdo

Entender e medir 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. First Paint e First Contentful Paint capturam apenas o início da experiência. A First Meaningful Paint é melhor, mas é complexa e às vezes errada.

A API Largest 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 permite medir quando o conteúdo principal da página é carregado.

Para medir a Largest Contentful Paint, você precisa usar um Observador de desempenho e procurar 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 elemento mais grande em uma página 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 tem um ótimo post 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 e a sensação de elementos existentes ou para criar novos controles que não são integrados ao navegador. Isso geralmente envolve o uso de JavaScript e elementos <input> ocultos, mas não é uma solução perfeita.

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

O evento formdata

O evento formdata é uma API de baixo nível que permite que qualquer código JavaScript participe de um envio de 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 com todos os dados que estão sendo enviados. Em seguida, no manipulador de eventos formdata, é possível atualizar ou modificar o formdata antes do envio.

Elementos personalizados associados a formulários

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

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Confira Mais controles de formulário avançados no web.dev para saber todos os detalhes.

Carregamento lento nativo

Não sei como deixei de falar sobre o carregamento lento nativo no meu último vídeo. Ela é muito incrível, então vou incluí-la agora. O carregamento lento é uma técnica que permite adiar o carregamento de recursos não críticos, como <img>s fora da tela ou <iframe>s, até que eles sejam necessários, aumentando o desempenho da página.

A partir do Chrome 76, o navegador processa 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 carregado com lazy loading, use o atributo loading="lazy". Imagens e iframes "acima da dobra" são carregados normalmente. E os que estão abaixo deles só são buscados quando o usuário rola a tela perto deles.

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

Confira detalhes em Carregamento lento no nível do navegador para a Web no web.dev.

Chrome Dev Summit 2019

O Chrome Dev Summit vai acontecer nos dias 11 e 12 de novembro.

É uma ótima oportunidade de aprender sobre as ferramentas e atualizações mais recentes que estão chegando à plataforma da Web e ouvir diretamente da equipe de engenharia do Chrome.

O evento será transmitido ao vivo no nosso canal do YouTube. Se você quiser participar pessoalmente, solicite seu convite no site do Chrome Dev Summit 2019.

E muito mais.

Estas são apenas algumas das mudanças no Chrome 77 para desenvolvedores. Há muitas outras.

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

Há novas unidades de medida na API intl.NumberFormat.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira as mudanças adicionais no Chrome 77 nos links abaixo.

Inscrever-se

Se quiser ficar por dentro dos nossos vídeos, 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 é Pete LePage, e assim que o Chrome 78 for lançado, estarei aqui para contar as novidades do Chrome!