Novedades de Chrome 77

Pete LePage

Chrome 77 ya está disponible.

Soy Pete LePage. Comencemos a ver 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 te indican lo que el usuario ve en la pantalla. El primer procesamiento de imagen y el primer procesamiento de imagen con contenido solo capturan el comienzo de la experiencia. El primer procesamiento de imagen significativa es mejor, pero es complejo y, a veces, incorrecto.

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 el viewport y permite medir cuándo se carga el contenido principal de la página.

Para medir el procesamiento de imagen con contenido más grande, deberás 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 el Procesamiento de imagen con contenido más grande en web.dev.

Nuevas funciones de los formularios

Muchos desarrolladores crean controles de formulario personalizados, ya sea para personalizar el aspecto de los elementos existentes o para crear 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, agregadas en Chrome 77, facilitan la compilación de controles de formulario 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 envían. Luego, en tu controlador de eventos formdata, puedes actualizar o modificar el formdata antes de que se envíe.

Elementos personalizados asociados con el formulario

Los elementos personalizados asociados con el formulario ayudan a cerrar la brecha entre los elementos personalizados y los controles nativos. Agregar una propiedad formAssociated estática le indica al navegador que trate el elemento personalizado como todos los demás elementos del formulario. También debes agregar las 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 obtener todos los detalles.

Carga diferida nativa

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

A partir de Chrome 76, el navegador controla la carga diferida por ti, sin necesidad de escribir código de carga diferida personalizado ni usar una biblioteca de JavaScript independiente.

Para indicarle al navegador que deseas una imagen o un iframe cargado de forma diferida, usa el atributo loading="lazy". Las imágenes y los iframes que se encuentran "en la mitad superior de la página" se cargan de forma normal. Y los que están debajo solo se recuperan cuando el usuario se desplaza cerca de ellos.

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

Consulta Carga diferida a nivel del navegador para la Web en web.dev para obtener más información.

Chrome Dev Summit 2019

La Chrome Dev Summit se llevará a cabo el 11 y 12 de noviembre.

Es una gran oportunidad para conocer las herramientas y actualizaciones más recientes que se implementarán en la plataforma web, y escuchar directamente al equipo de ingeniería de Chrome.

Se transmitirá en vivo en 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 implementados en Chrome 77 para desarrolladores, por supuesto, hay muchos más.

La API de Contact Picker, disponible como prueba de origen, es un nuevo selector on demand 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 solo abarca algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver más cambios en Chrome 77.

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome y 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 contarte las novedades.