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. A First Paint e a 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 maior exibição de conteúdo, use um Performance Observer 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 elemento maior 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 de envio, o formulário dispara o evento formdata, que inclui um objeto FormData que contém todos os dados enviados. Em seguida, no manipulador de eventos formdata, você pode 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 elementos personalizados e controles nativos. Adicionar uma propriedade formAssociated estática informa ao navegador para tratar o elemento personalizado como todos os outros elementos do 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 que estão "acima da dobra" são carregadas normalmente. E os que estão abaixo só são buscados quando o usuário rola para 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 para saber mais sobre as ferramentas e atualizações mais recentes da 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 que os usuários selecionem uma ou mais entradas da lista de contatos e compartilhem detalhes limitados dos contatos selecionados com um site.

E há novas unidades de medição 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, vou estar aqui para contar as novidades do Chrome.