Novedades de Chrome 60

  • La API de Paint Timing te permite medir el tiempo hasta el primer procesamiento de imagen y el tiempo hasta el primer procesamiento de imagen con contenido con el AP de Paint Timing.
  • font-display te permite controlar cómo se renderizan las fuentes antes de que se descarguen.
  • Ya llegó WebAssembly
  • Hay mucho más.

¿Quieres ver la lista completa de cambios? Consulta la lista de cambios del repositorio de código fuente de Chromium.

Soy Pete LePage. Profundicemos y veamos las novedades para desarrolladores en Chrome 60.

API de Paint Timings

Cuando un usuario navega a una página web, busca comentarios visuales para confirmar que todo funciona correctamente. Con la nueva API de tiempos de pintura, ahora podemos medirlo.

La API expone dos métricas:

  • Tiempo para la primera pintura: Marca el punto en el que el navegador comienza a renderizar algo (el primer fragmento de contenido en la pantalla).
  • Tiempo para el primer procesamiento de imagen con contenido: Marca el punto en el que el navegador renderiza el primer bit de contenido del DOM, el texto, una imagen, etcétera.

Consulta Aprovecha las métricas de rendimiento que más afectan la experiencia del usuario para obtener información sobre cómo hacer un seguimiento de estas métricas y usarlas para mejorar tu experiencia.

Propiedad font-display de CSS

Las fuentes web te permiten incorporar tipografía enriquecida. Sin embargo, si el usuario aún no tiene el tipo de letra, debe descargarlo, lo que podría hacer que tu sitio parezca lento.

Por suerte, la mayoría de los navegadores usarán un resguardo si la fuente tarda demasiado en descargarse. La nueva propiedad font-display te permite controlar cómo se renderiza una fuente descargable antes de que se cargue por completo.

  • auto usa la estrategia de visualización de fuentes que utiliza el usuario-agente.
  • block le otorga al tipo de fuente un período de bloqueo corto y un período de intercambio infinito.
  • swap le otorga al tipo de fuente un período de bloqueo de cero segundos y un período de intercambio infinito.
  • fallback le otorga al tipo de fuente un período de bloqueo extremadamente pequeño y un período de intercambio corto.
  • optional le otorga al tipo de fuente un período de bloque extremadamente pequeño y un período de intercambio de cero segundos.

Es compatible con Chrome 60 y Opera, y se encuentra en desarrollo en Firefox. Consulta Cómo controlar el rendimiento de las fuentes con font-display para obtener más información.

WebAssembly

Web Assembly o wasm proporciona una nueva forma de ejecutar código, escrito en lenguajes como C y C++ en la Web, a una velocidad casi nativa.

Proporciona la velocidad necesaria para compilar un editor de video en el navegador o ejecutar un juego de Unity a una velocidad de fotogramas alta con las APIs de plataforma web basadas en estándares existentes.

Puedes obtener más información en webassembly.org, incluidas demostraciones, documentos y cómo comenzar.

Y mucho más

  • La nueva API de presupuesto web permite que los sitios con el permiso de notificaciones push envíen una cantidad limitada de mensajes push que activan tareas en segundo plano, como sincronizar datos o descartar notificaciones, sin la necesidad de mostrar una notificación visible para el usuario.
  • PushSubscription.expirationTime ya está disponible para notificar a los sitios cuándo vencerá una suscripción y si vencerá.
  • Ahora se admiten las propiedades de restablecimiento y expansión de objetos, lo que facilita la fusión y la clonación superficial de objetos, así como la implementación de varios patrones de objetos inmutables.

Nota: La API de Payment Request se envió a Chrome 61.

Estos son solo algunos de los cambios que se implementaron en Chrome 60 para desarrolladores.

Luego, suscríbete a nuestro canal de YouTube y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 61, estaré aquí para decirte: ¡Novedades de Chrome!