Nieuw in Chrome 77

Piet LePage

Chrome 77 wordt nu uitgerold!

Ik ben Pete LePage , laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 77!

Grootste inhoudsvolle verf

Het kan moeilijk zijn om de prestaties van uw site in de echte wereld te begrijpen en te meten. Statistieken zoals load of DOMContentLoaded vertellen u niet wat de gebruiker op het scherm ziet. First Paint en First Contentful Paint leggen alleen het begin van de ervaring vast. First Meaningful Paint is beter, maar het is complex en soms verkeerd.

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

Om de grootste contentvolle verf te meten, moet je een Performance Observer gebruiken en zoeken naar gebeurtenissen 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);

Omdat een pagina vaak in fasen wordt geladen, is het mogelijk dat het grootste element op een pagina verandert. Rapporteer daarom alleen de laatste largest-contentful-paint gebeurtenis aan uw analyseservice.

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 grootste inhoudsvolle verf op web.dev.

Nieuwe formuliermogelijkheden

Veel ontwikkelaars bouwen aangepaste formulierbesturingselementen, om het uiterlijk van bestaande elementen aan te passen, of om nieuwe besturingselementen te bouwen die niet in de browser zijn ingebouwd. Normaal gesproken gaat dit gepaard met het gebruik van JavaScript en verborgen <input> -elementen, maar het is geen perfecte oplossing.

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

De formdata gebeurtenis

De formdata gebeurtenis is een API op laag niveau waarmee elke JavaScript-code kan deelnemen aan een formulierinzending. Om het 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 verzendknop klikt, activeert het formulier de formdata gebeurtenis, die een FormData object bevat dat alle gegevens bevat die worden verzonden. Vervolgens kunt u in uw formdata de formdata bijwerken of wijzigen voordat deze worden verzonden.

Formuliergerelateerde aangepaste elementen

Met formulieren geassocieerde aangepaste elementen helpen de kloof te overbruggen tussen aangepaste elementen en native besturingselementen. Door een statische eigenschap formAssociated toe te voegen, krijgt de browser de opdracht het aangepaste element net als alle andere formulierelementen te behandelen. U moet ook algemene eigenschappen toevoegen die te vinden zijn in invoerelementen, zoals name , value en validity om consistentie met systeemeigen besturingselementen 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 lui laden

Ik weet niet zeker hoe ik native lazyloading heb gemist in mijn laatste video! Het is behoorlijk verbazingwekkend, dus ik neem het nu op. Lui laden is een techniek waarmee u het laden van niet-kritieke bronnen, zoals off-screen <img> 's of <iframe> 's, kunt uitstellen totdat ze nodig zijn, waardoor de prestaties van uw pagina toenemen.

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

Om de browser te laten weten dat u een afbeelding of een iframe lui wilt laden, gebruikt u het loading="lazy" attribuut. Afbeeldingen en iframes die zich 'boven de vouw' bevinden, worden normaal geladen. En degenen die eronder staan, worden alleen opgehaald als de gebruiker er dichtbij scrollt.

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

Bekijk Lazy-loading op browserniveau voor internet op web.dev voor meer informatie.

Chrome Dev Summit 2019

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

Het is een geweldige kans om meer te weten te komen over de nieuwste tools en updates die naar het webplatform komen, en rechtstreeks van het technische team van Chrome te horen.

Het wordt live gestreamd op ons YouTube-kanaal , of als u persoonlijk aanwezig wilt zijn, kunt u uw uitnodiging aanvragen op de Chrome Dev Summit 2019- website.

En meer!

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

De Contact Picker API , beschikbaar als origin-proefversie, is een nieuwe, on-demand kiezer waarmee gebruikers een item of 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 behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 77.

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 78 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!

,

Piet LePage

Chrome 77 wordt nu uitgerold!

Ik ben Pete LePage , laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 77!

Grootste inhoudsvolle verf

Het kan moeilijk zijn om de prestaties van uw site in de echte wereld te begrijpen en te meten. Statistieken zoals load of DOMContentLoaded vertellen u niet wat de gebruiker op het scherm ziet. First Paint en First Contentful Paint leggen alleen het begin van de ervaring vast. First Meaningful Paint is beter, maar het is complex en soms verkeerd.

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

Om de grootste contentvolle verf te meten, moet je een Performance Observer gebruiken en zoeken naar gebeurtenissen 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);

Omdat een pagina vaak in fasen wordt geladen, is het mogelijk dat het grootste element op een pagina verandert. Rapporteer daarom alleen de laatste largest-contentful-paint gebeurtenis aan uw analyseservice.

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 grootste inhoudsvolle verf op web.dev.

Nieuwe formuliermogelijkheden

Veel ontwikkelaars bouwen aangepaste formulierbesturingselementen, om het uiterlijk van bestaande elementen aan te passen, of om nieuwe besturingselementen te bouwen die niet in de browser zijn ingebouwd. Normaal gesproken gaat dit gepaard met het gebruik van JavaScript en verborgen <input> -elementen, maar het is geen perfecte oplossing.

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

De formdata gebeurtenis

De formdata gebeurtenis is een API op laag niveau waarmee elke JavaScript-code kan deelnemen aan een formulierinzending. Om het 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 verzendknop klikt, activeert het formulier de formdata gebeurtenis, die een FormData object bevat dat alle gegevens bevat die worden verzonden. Vervolgens kunt u in uw formdata de formdata bijwerken of wijzigen voordat deze worden verzonden.

Formuliergerelateerde aangepaste elementen

Met formulieren geassocieerde aangepaste elementen helpen de kloof te overbruggen tussen aangepaste elementen en native besturingselementen. Door een statische eigenschap formAssociated toe te voegen, krijgt de browser de opdracht het aangepaste element net als alle andere formulierelementen te behandelen. U moet ook algemene eigenschappen toevoegen die te vinden zijn in invoerelementen, zoals name , value en validity om consistentie met systeemeigen besturingselementen 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 lui laden

Ik weet niet zeker hoe ik native lazyloading heb gemist in mijn laatste video! Het is behoorlijk verbazingwekkend, dus ik neem het nu op. Lui laden is een techniek waarmee u het laden van niet-kritieke bronnen, zoals off-screen <img> 's of <iframe> 's, kunt uitstellen totdat ze nodig zijn, waardoor de prestaties van uw pagina toenemen.

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

Om de browser te laten weten dat u een afbeelding of een iframe lui wilt laden, gebruikt u het loading="lazy" attribuut. Afbeeldingen en iframes die zich 'boven de vouw' bevinden, worden normaal geladen. En degenen die eronder staan, worden alleen opgehaald als de gebruiker er dichtbij scrollt.

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

Bekijk Lazy-loading op browserniveau voor internet op web.dev voor meer informatie.

Chrome Dev Summit 2019

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

Het is een geweldige kans om meer te weten te komen over de nieuwste tools en updates die naar het webplatform komen, en rechtstreeks van het technische team van Chrome te horen.

Het wordt live gestreamd op ons YouTube-kanaal , of als u persoonlijk aanwezig wilt zijn, kunt u uw uitnodiging aanvragen op de Chrome Dev Summit 2019- website.

En meer!

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

De Contact Picker API , beschikbaar als origin-proefversie, is een nieuwe, on-demand kiezer waarmee gebruikers een item of 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 behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 77.

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 78 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!