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

Die tatsächliche Leistung einer Website zu verstehen und zu messen, kann schwierig sein. Messwerte wie load oder DOMContentLoaded geben keinen Aufschluss darüber, was der Nutzer auf dem Bildschirm sieht. „First Paint“ und „First Contentful Paint“ erfassen nur den Anfang. „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. Dies ist jedoch keine perfekte Lösung.

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

Das formdata-Ereignis

Das Ereignis formdata ist eine Low-Level-API, mit der jeder JavaScript-Code an einer Formulareinreichung teilnehmen kann. Fügen Sie dem Formular, mit dem Sie interagieren möchten, einen formdata-Event-Listener hinzu, um ihn zu verwenden.

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.

Formularbezogene benutzerdefinierte Elemente

Mit formularzugeordneten benutzerdefinierten Elementen können Sie die Lücke zwischen benutzerdefinierten Elementen und nativen Steuerelementen schließen. Durch Hinzufügen einer statischen formAssociated-Eigenschaft wird dem Browser mitgeteilt, dass das benutzerdefinierte Element wie alle anderen Formularelemente behandelt werden soll. 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 Effektivere 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 ein. 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 ohne Scrollen sichtbar sind, werden normal geladen. Die darunter befindlichen Elemente werden nur abgerufen, wenn der Nutzer in ihrer 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.

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 Ursprungstest 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 zu den ausgewählten Kontakten mit einer Website teilen können.

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

Weitere Informationen

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

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, können Sie unseren YouTube-Kanal für Chrome-Entwickler abonnieren. Dann werden Sie per E-Mail benachrichtigt, 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.