Novedades de Chrome 77

Pete LePage

Ya estamos lanzando Chrome 77.

Soy Pete LePage. Comencemos con las novedades para desarrolladores en Chrome 77.

Procesamiento de imagen con contenido más grande

Comprender y medir el rendimiento real de tu sitio puede ser difícil. Las métricas como load o DOMContentLoaded no indican lo que el usuario ve en la pantalla. First Paint y First Contentful Paint solo capturan el comienzo de la experiencia. Primera pintura significativa es mejor, pero es compleja y a veces incorrecta.

La API de Largest Contentful Paint, disponible a partir de Chrome 77, informa el tiempo de renderización del elemento de contenido más grande visible en viewport y permite medir cuándo se carga el contenido principal de la página.

Para medir el Largest Contentful Paint, debes usar un Observador de rendimiento y buscar 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);

Dado que una página suele cargarse en etapas, es posible que cambie el elemento más grande de una página, por lo que solo debes informar el último evento largest-contentful-paint a tu servicio de estadísticas.

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

Phil tiene una excelente publicación sobre Largest Contentful Paint en web.dev.

Nuevas funciones de formularios

Muchos desarrolladores compilan controles de formularios personalizados, ya sea para personalizar el aspecto de los elementos existentes o para compilar controles nuevos que no están integrados en el navegador. Por lo general, esto implica usar JavaScript y elementos <input> ocultos, pero no es una solución perfecta.

Dos nuevas funciones web, que se agregaron en Chrome 77, facilitan la compilación de controles de formularios personalizados y quitan muchas de las limitaciones existentes.

El evento formdata

El evento formdata es una API de bajo nivel que permite que cualquier código JavaScript participe en el envío de un formulario. Para usarlo, agrega un objeto de escucha de eventos formdata al formulario con el que deseas interactuar.

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

Cuando el usuario hace clic en el botón de envío, el formulario activa el evento formdata, que incluye un objeto FormData que contiene todos los datos que se enviaron. Luego, en el controlador de eventos formdata, puedes actualizar o modificar el formdata antes de que se envíe.

Elementos personalizados asociados con formularios

Los elementos personalizados asociados con el formulario ayudan a cerrar la brecha entre los elementos personalizados y los controles nativos. Cuando se agrega una propiedad formAssociated estática, se indica al navegador que trate el elemento personalizado como todos los demás elementos del formulario. También debes agregar propiedades comunes que se encuentran en los elementos de entrada, como name, value y validity, para garantizar la coherencia con los controles nativos.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Consulta Controles de formularios más capaces en web.dev para conocer todos los detalles.

Carga diferida nativa

No sé cómo me perdí la carga diferida nativa en mi último video. Es bastante increíble, así que lo incluyo ahora. La carga diferida es una técnica que te permite postergar la carga de recursos no críticos, como los <img> o <iframe> fuera de la pantalla, hasta que sean necesarios, lo que aumenta el rendimiento de tu página.

A partir de Chrome 76, el navegador se encargará de la carga diferida, sin necesidad de escribir código de carga diferida personalizado ni de usar una biblioteca de JavaScript separada.

Para indicarle al navegador que quieres una imagen o una carga diferida de iframe, usa el atributo loading="lazy". Las imágenes y los iframes que se encuentran en la "mitad superior de la página" se cargan normalmente. Y las que están a continuación solo se recuperan cuando el usuario se desplaza cerca de ellas.

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

Consulta Carga diferida a nivel del navegador para la Web en web.dev a fin de obtener más detalles.

Chrome Dev Summit 2019

La Chrome Dev Summit se realizará el 11 y 12 de noviembre.

Es una gran oportunidad para aprender sobre las herramientas y actualizaciones más recientes que llegarán a la plataforma web y escuchar directamente al equipo de Ingeniería de Chrome.

Se transmitirá en vivo a través de nuestro canal de YouTube. Si quieres asistir en persona, puedes solicitar tu invitación en el sitio web de la Chrome Dev Summit 2019.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 77 para desarrolladores y, por supuesto, hay muchos más.

La API de Contact Picker, disponible como prueba de origen, es un nuevo selector a pedido que permite a los usuarios seleccionar una o varias entradas de su lista de contactos y compartir detalles limitados de los contactos seleccionados con un sitio web.

Además, hay nuevas unidades de medida en la API de intl.NumberFormat.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 77.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete al canal de YouTube de Chrome Developers. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y en cuanto se lance Chrome 78, estaré aquí para contarles las novedades de Chrome.