Neu in Chrome 77

Pete LePage

Chrome 77 wird jetzt eingeführt.

Ich bin Pete LePage und wir sehen uns jetzt an, was es Neues für Entwickler in Chrome 77 gibt.

Largest Contentful Paint

Es kann schwierig sein, die Leistung Ihrer Website in der Praxis zu verstehen und zu messen. Messwerte wie load oder DOMContentLoaded geben nicht an, was der Nutzer auf dem Bildschirm sieht. „First Paint“ und „First Contentful Paint“ erfassen nur den Beginn der Nutzererfahrung. „Inhalte weitgehend gezeichnet“ ist besser, aber komplex und manchmal falsch.

Die Largest Contentful Paint API, die ab Chrome 77 verfügbar ist, gibt die Renderingzeit des größten Inhaltselements an, das im Darstellungsbereich sichtbar ist. So lässt sich messen, wann der Hauptinhalt der Seite geladen wird.

Um den Largest Contentful Paint zu messen, müssen Sie einen Performance Observer verwenden und nach largest-contentful-paint-Ereignissen suchen.

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

Da eine Seite oft in Phasen geladen wird, kann sich das größte Element auf einer Seite ändern. Sie sollten daher nur das letzte largest-contentful-paint-Ereignis an Ihren Analysedienst senden.

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

Phil hat auf web.dev einen tollen Beitrag zum Largest Contentful Paint veröffentlicht.

Neue Funktionen für Formulare

Viele Entwickler erstellen benutzerdefinierte Formularsteuerelemente, um das Erscheinungsbild vorhandener Elemente anzupassen oder neue Steuerelemente zu erstellen, die nicht im Browser integriert sind. Dazu wird in der Regel JavaScript und verborgene <input>-Elemente verwendet. Das ist jedoch keine perfekte Lösung.

Zwei neue Webfunktionen, die in Chrome 77 hinzugefügt wurden, erleichtern das Erstellen benutzerdefinierter Formularsteuerelemente und beseitigen viele der bestehenden Einschränkungen.

Das formdata-Ereignis

Das formdata-Ereignis ist eine untergeordnete API, mit der beliebiger JavaScript-Code an der Übermittlung eines Formulars teilnehmen kann. Fügen Sie dazu dem Formular, mit dem Sie interagieren möchten, einen formdata-Event-Listener hinzu.

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

Wenn der Nutzer auf die Schaltfläche „Senden“ klickt, löst das Formular das formdata-Ereignis aus, das ein FormData-Objekt mit allen gesendeten Daten enthält. Im formdata-Ereignishandler können Sie dann das formdata aktualisieren oder ändern, bevor es gesendet wird.

Benutzerdefinierte Elemente, die mit Formularen verknüpft sind

Formularbezogene benutzerdefinierte Elemente helfen, die Lücke zwischen benutzerdefinierten Elementen und nativen Steuerelementen zu schließen. Wenn Sie eine statische formAssociated-Eigenschaft hinzufügen, wird das benutzerdefinierte Element vom Browser wie alle anderen Formularelemente behandelt. Sie sollten auch allgemeine Attribute von Eingabeelementen wie name, value und validity hinzufügen, um die Konsistenz mit nativen Steuerelementen zu gewährleisten.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Weitere Informationen finden Sie unter Leistungsfähigere Formularsteuerelemente auf web.dev.

Natives Lazy Loading

Ich bin mir nicht sicher, wie ich das native Lazy Loading in meinem letzten Video übersehen konnte. Es ist wirklich erstaunlich, deshalb nehme ich es jetzt mit auf. Lazy Loading ist eine Technik, mit der Sie das Laden nicht kritischer Ressourcen wie <img> oder <iframe> auf Ihrer Seite verzögern können, bis sie benötigt werden. So lässt sich die Leistung Ihrer Seite steigern.

Ab Chrome 76 übernimmt der Browser das Lazy Loading für Sie, ohne dass Sie benutzerdefinierten Lazy-Loading-Code schreiben oder eine separate JavaScript-Bibliothek verwenden müssen.

Wenn Sie dem Browser mitteilen möchten, dass ein Bild oder ein iFrame verzögert geladen werden soll, verwenden Sie das Attribut loading="lazy". Bilder und iFrames, die „above the fold“ sind, werden normal geladen. Die Elemente darunter werden erst abgerufen, wenn der Nutzer zu ihnen scrollt.

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

Weitere Informationen finden Sie unter Browser level lazy-loading for the web auf web.dev.

Chrome Dev Summit 2019

Der Chrome Dev Summit findet am 11. und 12. November statt.

Das ist eine gute Gelegenheit, mehr über die neuesten Tools und Updates für die Webplattform zu erfahren und direkt vom Chrome-Entwicklungsteam zu hören.

Die Veranstaltung wird live auf unserem YouTube-Kanal übertragen. Wenn Sie persönlich teilnehmen möchten, können Sie auf der Website des Chrome Dev Summit 2019 eine Einladung anfordern.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 77 für Entwickler.

Die Contact Picker API ist als Origin Trial verfügbar. Sie ist eine neue On-Demand-Auswahl, mit der Nutzer einen oder mehrere Einträge aus ihrer Kontaktliste auswählen und begrenzte Details der ausgewählten Kontakte mit einer Website teilen können.

Außerdem gibt es neue Maßeinheiten in der intl.NumberFormat API.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 77.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 78 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.