Nieuw in Chrome 77

Pete LePage

Chrome 77 wordt nu uitgerold!

Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 77!

Grootste contentvolle verf

Het begrijpen en meten van de werkelijke prestaties van je site kan lastig zijn. Metrieken zoals load of DOMContentLoaded vertellen je niet wat de gebruiker op het scherm ziet. First Paint en First Contentful Paint leggen slechts het begin van de ervaring vast. First Meaningful Paint is beter, maar complex en soms onjuist.

De Largest Contentful Paint API , beschikbaar vanaf Chrome 77, rapporteert de rendertijd van het grootste zichtbare contentelement in de viewport en maakt het mogelijk om te meten wanneer de hoofdinhoud van de pagina is geladen.

Om de Largest Contentful Paint te meten, moet u een Performance Observer gebruiken en op zoek gaan naar largest-contentful-paint gebeurtenissen.

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);

Omdat een pagina vaak in fasen wordt geladen, kan het voorkomen dat het grootste element op een pagina verandert. In dat geval moet u alleen de laatste gebeurtenis largest-contentful-paint aan uw analyseservice rapporteren.

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

Phil heeft een geweldig bericht over de Largest Contentful Paint op web.dev.

Nieuwe formuliermogelijkheden

Veel ontwikkelaars bouwen aangepaste formulierelementen, om de look en feel van bestaande elementen aan te passen of om nieuwe elementen te bouwen die niet in de browser zijn ingebouwd. Meestal worden hiervoor JavaScript en verborgen <input> -elementen gebruikt, maar dit is geen perfecte oplossing.

Twee nieuwe webfuncties, toegevoegd in Chrome 77, maken het eenvoudiger om aangepaste formulierbesturingselementen te bouwen en verwijderen veel van de bestaande beperkingen.

De formdata -gebeurtenis

De formdata -gebeurtenis is een low-level API waarmee JavaScript-code kan deelnemen aan een formulierinzending. Om deze te gebruiken, voegt u een formdata -gebeurtenislistener toe aan het formulier waarmee u wilt communiceren.

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

Wanneer de gebruiker op de knop Verzenden klikt, activeert het formulier de formdata -gebeurtenis, die een FormData object bevat dat alle te verzenden gegevens bevat. Vervolgens kunt u in uw formdata gebeurtenishandler de formdata bijwerken of wijzigen voordat deze wordt verzonden.

Formulier-geassocieerde aangepaste elementen

Formulier-geassocieerde aangepaste elementen helpen de kloof tussen aangepaste elementen en native controls te overbruggen. Door een statische formAssociated eigenschap toe te voegen, geeft u de browser opdracht het aangepaste element te behandelen als alle andere formulierelementen. Voeg ook algemene eigenschappen van invoerelementen toe, zoals name , value en validity om consistentie met native controls te garanderen.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Bekijk Meer capabele formulierbesturingselementen op web.dev voor alle details!

Native lazy loading

Ik snap niet hoe ik native lazy loading in mijn vorige video heb gemist! Het is echt geweldig, dus ik neem het nu op. Lazy loading is een techniek waarmee je het laden van niet-kritieke bronnen, zoals off-screen <img> 's of <iframe> 's, kunt uitstellen totdat ze nodig zijn, waardoor de prestaties van je pagina verbeteren.

Vanaf Chrome 76 regelt de browser het lazy loading voor u, zonder dat u aangepaste code voor lazy loading hoeft te schrijven of een aparte JavaScript-bibliotheek hoeft te gebruiken.

Om de browser te laten weten dat je een afbeelding of iframe lazy wilt laden, gebruik je het attribuut loading="lazy" . Afbeeldingen en iframes die "boven de vouw" staan, laden normaal. Afbeeldingen en iframes die eronder staan, worden alleen opgehaald wanneer de gebruiker er dichtbij scrolt.

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

Zie Browser level lazy-loading voor het web op web.dev voor meer informatie.

Chrome Dev Summit 2019

De Chrome Dev Summit vindt plaats op 11 en 12 november.

Dit is een geweldige kans om meer te weten te komen over de nieuwste tools en updates voor het webplatform. Ook kunt u rechtstreeks van het Chrome-engineeringteam horen wat er aan de hand is.

De bijeenkomst wordt live gestreamd op ons YouTube-kanaal . Wilt u er persoonlijk bij zijn, dan kunt u een uitnodiging aanvragen op de website van Chrome Dev Summit 2019 .

En nog veel meer!

Dit zijn slechts enkele van de wijzigingen in Chrome 77 voor ontwikkelaars. Er is natuurlijk nog veel meer.

De Contact Picker API , beschikbaar als proefversie, is een nieuwe, on-demand kiezer waarmee gebruikers een of meer items uit hun contactenlijst kunnen selecteren en beperkte details van de geselecteerde contacten kunnen delen met een website.

En er zijn nieuwe meeteenheden in de intl.NumberFormat API .

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 77.

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 78 uitkomt, vertel ik u wat er nieuw is in Chrome!