Neu in Chrome 77

Pete LePage

Chrome 77 wird jetzt eingeführt.

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 77 für Entwickler neu ist.

Largest Contentful Paint

Es kann schwierig sein, die tatsächliche Leistung Ihrer Website zu verstehen und zu messen. Messwerte wie load oder DOMContentLoaded geben Aufschluss darüber, was der Nutzer auf dem Bildschirm sieht. „First Paint“ und „First Contentful Paint“ erfassen nur den Anfang 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 im Darstellungsbereich an 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 Leistungsbeobachter 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 mehreren Schritten 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 einen tollen Beitrag über Largest Contentful Paint auf web.dev veröffentlicht.

Neue Funktionen für Formulare

Viele Entwickler erstellen benutzerdefinierte Formularsteuerelemente, um entweder das Aussehen und die Bedienung vorhandener Elemente anzupassen oder neue Steuerelemente zu erstellen, die nicht im Browser integriert sind. In der Regel ist dafür JavaScript und das versteckte <input>-Element erforderlich. Das ist jedoch keine perfekte Lösung.

Mit zwei neuen Webfunktionen, die in Chrome 77 hinzugefügt wurden, lassen sich benutzerdefinierte Formularsteuerelemente einfacher erstellen und viele der bestehenden Einschränkungen werden aufgehoben.

Das formdata-Ereignis

Das Ereignis formdata ist eine Low-Level-API, mit der jeder JavaScript-Code an einer Formulareinreichung teilnehmen kann. Wenn Sie diese Funktion verwenden möchten, fügen Sie dem Formular, mit dem Sie interagieren möchten, einen formdata-Ereignis-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 Ereignis formdata aus. Dieses enthält ein FormData-Objekt, das alle gesendeten Daten enthält. Anschließend kannst du in deinem formdata-Ereignishandler die formdata aktualisieren oder ändern, bevor sie gesendet wird.

Mit dem Formular verknüpfte benutzerdefinierte Elemente

Mit formularzugeordneten benutzerdefinierten Elementen können Sie die Lücke zwischen benutzerdefinierten Elementen und nativen Steuerelementen schließen. Wenn Sie eine statische formAssociated-Property hinzufügen, wird dem Browser mitgeteilt, das benutzerdefinierte Element wie alle anderen Formularelemente zu behandeln. Sie sollten auch gängige Eigenschaften für Eingabeelemente wie name, value und validity hinzufügen, um für Einheitlichkeit mit nativen Steuerelementen zu sorgen.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Weitere Informationen finden Sie unter Leistungsstärkere Formularsteuerelemente auf web.dev.

Natives Lazy Loading

Ich weiß nicht, wie ich das native Lazy Loading in meinem letzten Video übersehen habe. Es ist ziemlich erstaunlich, also füge ich es jetzt hinzu. Mit Lazy Loading können Sie das Laden nicht kritischer Ressourcen wie <img> oder <iframe> außerhalb des Bildschirms so lange verzögern, bis sie benötigt werden. So wird die Leistung Ihrer Seite verbessert.

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 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 in ihre Nähe scrollt.

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

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

Chrome Dev Summit 2019

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

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

Die Veranstaltung wird live auf unserem YouTube-Kanal gestreamt. 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 nur einige der Änderungen in Chrome 77 für Entwickler. Es gibt natürlich noch viele weitere.

Die Contact Picker API, die als Origin Trial verfügbar ist, ist eine neue On-Demand-Auswahl, mit der Nutzer einen oder mehrere Einträge aus ihrer Kontaktliste auswählen und eingeschränkte 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 Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Ä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, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 78 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.