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 de carregamento lento 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.

A transmissão será feita ao vivo no nosso canal do YouTube. Se você quiser participar pessoalmente, solicite seu convite no site da Conferência de Desenvolvedores do Chrome 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.