Neu in Chrome 77

Pete LePage

Chrome 77 wird gerade eingeführt.

Mein Name ist Pete LePage. Als Nächstes sehen wir uns an, was es für Entwickler bei Chrome 77 Neues gibt.

Largest Contentful Paint

Es ist nicht immer einfach, die tatsächliche Leistung einer Website zu verstehen und zu messen. Messwerte wie load oder DOMContentLoaded geben nicht Aufschluss darüber, was der Nutzer auf dem Bildschirm sieht. First Paint und First Contentful Paint erfassen nur den Anfang der User Experience. First Meaningful Paint ist besser, aber komplex und manchmal falsch.

Die Largest Contentful Paint API, die ab Chrome 77 verfügbar ist, meldet die Renderingzeit des größten sichtbaren Inhaltselements im Darstellungsbereich und ermöglicht es zu messen, wann der Hauptinhalt der Seite geladen wird.

Wenn Sie den Largest Contentful Paint messen möchten, 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. Daher sollten Sie nur das letzte largest-contentful-paint-Ereignis an Ihren Analysedienst melden.

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

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

Neue Formularfunktionen

Viele Entwickler erstellen benutzerdefinierte Formularsteuerelemente, um entweder das Erscheinungsbild vorhandener Elemente anzupassen oder neue Steuerelemente zu erstellen, die nicht in den Browser integriert sind. Dazu werden normalerweise JavaScript und ausgeblendete <input>-Elemente verwendet, dies ist jedoch keine perfekte Lösung.

Zwei neue Webfunktionen in Chrome 77 vereinfachen das Erstellen benutzerdefinierter Formularsteuerelemente. Außerdem entfallen die vielen bestehenden Einschränkungen.

Das Ereignis formdata

Das formdata-Ereignis ist eine Low-Level-API, mit der jeder JavaScript-Code an einer Formularübermittlung 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 zum Senden klickt, löst das Formular das formdata-Ereignis aus, das ein FormData-Objekt enthält, das alle gesendeten Daten enthält. Anschließend können Sie formdata in Ihrem formdata-Event-Handler aktualisieren oder ändern, bevor sie gesendet wird.

Mit Formular verknüpfte benutzerdefinierte Elemente

Mit Formular verknüpfte benutzerdefinierte Elemente schließen die Lücke zwischen benutzerdefinierten Elementen und nativen Steuerelementen. Durch das Hinzufügen einer statischen formAssociated-Eigenschaft wird dem Browser mitgeteilt, dass das benutzerdefinierte Element wie alle anderen Formularelemente behandelt werden soll. Außerdem sollten Sie gängige Eigenschaften von Eingabeelementen wie name, value und validity hinzufügen, um die Konsistenz mit den nativen Steuerelementen sicherzustellen.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Weitere Informationen finden Sie unter Weitere Funktionen für Formularsteuerelemente auf web.dev.

Natives Lazy Loading

Ich bin mir nicht sicher, ob ich natives Lazy Loading in meinem letzten Video verpasst habe. Es ist ziemlich erstaunlich, also füge ich es jetzt hinzu. Lazy Loading ist ein Verfahren, mit dem Sie das Laden nicht kritischer Ressourcen wie <img>s oder <iframe>s außerhalb des Bildschirms verschieben können, bis sie benötigt werden, um die Leistung Ihrer Seite zu erhöhen.

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

Mithilfe des Attributs loading="lazy" teilen Sie dem Browser mit, dass Sie ein Bild oder Lazy Loading für iFrame verwenden möchten. Bilder und iFrames, die ohne Scrollen sichtbar sind, werden normal geladen. Die unteren werden nur abgerufen, wenn der Nutzer in der Nähe scrollt.

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

Weitere Informationen finden Sie unter Lazy Loading für das Web auf Browserebene auf web.dev.

Chrome Dev Summit 2019

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

Hier können Sie sich über die neuesten Tools und Updates für die Webplattform informieren und sich direkt vom Chrome-Entwicklerteam informieren.

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

…und vieles mehr

Dies sind nur einige der Änderungen für Entwickler in Chrome 77. Und natürlich gibt es noch viel mehr.

Die Contact Picker API, die als Ursprungstest verfügbar ist, ist eine neue On-Demand-Auswahl, mit der Nutzer einen oder mehrere Einträge aus ihrer Kontaktliste auswählen und begrenzte Details zu den ausgewählten Kontakten 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 Punkte. Weitere Änderungen in Chrome 77 finden Sie unter den folgenden Links.

Abo

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, sobald ein neues Video veröffentlicht wird.

Ich bin Pete LePage und sobald Chrome 78 veröffentlicht wird, melde ich Ihnen, was es Neues in Chrome gibt!