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 ciò che l'utente vede sullo schermo. First Paint e First Contentful Paint rilevano solo l'inizio dell'esperienza. First Meaningful Paint è meglio, 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 il caricamento dei 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, quindi dovresti segnalare solo l'ultimo evento largest-contentful-paint al tuo servizio di analisi.

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

Filippo ha un post molto utile 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 che non sono 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 usarlo, aggiungi un listener 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 di invio, il modulo attiva l'evento formdata, che include un oggetto FormData che contiene 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 quelle fuori schermo di <img> o di <iframe>, fino a quando non sono necessarie, aumentando il rendimento 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. Quelli sottostanti vengono recuperati solo quando l'utente scorre 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 tecnico di Chrome.

L'evento verrà trasmesso in live streaming sul nostro canale YouTube oppure, se vuoi partecipare in presenza, 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 punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 77.

Iscriviti

Vuoi tenerti al corrente sui nostri video, iscriviti al nostro canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

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