Novità di Chrome 77

Pete LePage

Chrome 77 è in fase di implementazione.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 77.

visualizzazione elemento più grande

Comprendere e misurare il rendimento reale del tuo sito può essere difficile. Metriche come load o DOMContentLoaded non ti dicono cosa sta visualizzando l'utente sullo schermo. First Paint e First Contentful Paint rilevano solo l'inizio dell'esperienza. First Meaningful Paint è migliore, ma è complesso e a volte sbagliato.

L'API Largest Contentful Paint, disponibile a partire da Chrome 77, indica il tempo di rendering dell'elemento di contenuti più grande visibile nell'area visibile e consente di misurare quando vengono caricati i contenuti principali della pagina.

Per misurare Largest Contentful Paint, devi utilizzare un osservatore del rendimento e cercare gli eventi 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);

Poiché una pagina viene spesso caricata in più fasi, è possibile che l'elemento più grande di una pagina cambi, pertanto devi registrare solo l'ultimo evento largest-contentful-paint nel tuo servizio di analisi.

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

Phil ha scritto un ottimo post su Largest Contentful Paint su web.dev.

Nuove funzionalità dei moduli

Molti sviluppatori creano controlli dei moduli personalizzati per personalizzare l'aspetto degli elementi esistenti o per creare nuovi controlli non integrati nel browser. In genere, questo comporta l'utilizzo di JavaScript e di elementi <input> nascosti, ma non è una soluzione perfetta.

Due nuove funzionalità web, aggiunte in Chrome 77, semplificano la creazione di controlli personalizzati per i moduli e rimuovono molte delle limitazioni esistenti.

L'evento formdata

L'evento formdata è un'API di basso livello che consente a qualsiasi codice JavaScript di partecipare all'invio di un modulo. Per utilizzarlo, aggiungi un ascoltatore di eventi formdata al modulo con cui vuoi interagire.

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

Quando l'utente fa clic sul pulsante Invia, il modulo attiva l'evento formdata, che include un oggetto FormData contenente tutti i dati inviati. Poi, nel gestore eventi formdata, puoi aggiornare o modificare il formdata prima che venga inviato.

Elementi personalizzati associati al modulo

Gli elementi personalizzati associati al modulo consentono di colmare il divario tra gli elementi personalizzati e i controlli nativi. L'aggiunta di una proprietà formAssociated statica indica al browser di trattare l'elemento personalizzato come tutti gli altri elementi del modulo. Devi anche aggiungere le proprietà comuni presenti negli elementi di input, come name, value e validity, per garantire la coerenza con i controlli nativi.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Per tutti i dettagli, consulta Controlli dei moduli più efficaci su web.dev.

Caricamento lento nativo

Non so come ho fatto a non notare il caricamento lento nativo nel mio ultimo video. È davvero fantastico, quindi lo includo subito. Il caricamento lento è una tecnica che consente di posticipare il caricamento di risorse non critiche, come <img> o <iframe> fuori schermo, fino a quando non sono necessarie, aumentando le prestazioni della pagina.

A partire da Chrome 76, il browser gestisce il caricamento differito per te, senza dover scrivere codice di caricamento differito personalizzato o utilizzare una libreria JavaScript separata.

Per indicare al browser che vuoi un'immagine o un iframe con caricamento differito, utilizza l'attributo loading="lazy". Le immagini e gli iframe "above the fold" caricano normalmente. mentre quelli sotto vengono recuperati solo quando l'utente scorri vicino a loro.

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

Per maggiori dettagli, consulta Caricamento lento a livello di browser per il web su web.dev.

Chrome Dev Summit 2019

Il Chrome Dev Summit si terrà l'11 e il 12 novembre.

È un'ottima opportunità per scoprire gli ultimi strumenti e aggiornamenti in arrivo sulla piattaforma web e ascoltare direttamente il team di ingegneria di Chrome.

L'evento verrà trasmesso in live streaming sul nostro canale YouTube oppure, se vuoi partecipare personalmente, puoi richiedere il tuo invito sul sito web del Chrome Dev Summit 2019.

E tanto altro.

Queste sono solo alcune delle modifiche in Chrome 77 per gli sviluppatori, ma ce ne sono molte altre.

L'API Contact Picker, disponibile come prova di origine, è un nuovo selettore on demand che consente agli utenti di selezionare una o più voci dal loro elenco contatti e di condividere dettagli limitati dei contatti selezionati con un sito web.

Inoltre, sono disponibili nuove unità di misura nell'API intl.NumberFormat.

Per approfondire

Sono riportati solo alcuni dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 77.

Iscriviti

Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 78, sarò qui per raccontarti le novità di Chrome.