Neu in Chrome 63

Pete LePage

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns nun an, was es bei Chrome 63 für Entwickler Neues gibt.

Vollständige Liste der Änderungen ansehen Weitere Informationen finden Sie in der Änderungsliste für das Chromium-Quell-Repository.

Dynamische Modulimporte

Das Importieren von JavaScript-Modulen ist sehr praktisch, aber statisch, sodass Sie keine Module basierend auf Laufzeitbedingungen importieren können.

Glücklicherweise ändert sich das in Chrome 63 mit der neuen Syntax für den dynamischen Import. Damit können Sie Code zur Laufzeit dynamisch in Module und Skripts laden. So kann ein Script nur dann geladen werden, wenn es benötigt wird, was die Leistung Ihrer Anwendung verbessert.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Anstatt die gesamte Anwendung zu laden, wenn der Nutzer Ihre Seite zum ersten Mal aufruft, können Sie die Ressourcen abrufen, die für die Anmeldung erforderlich sind. Die anfängliche Ladezeit ist kurz und die Geschwindigkeit sehr hoch. Sobald sich der Nutzer angemeldet hat, laden Sie den Rest und es kann losgehen.

Asynchrone Iteratoren und Generatoren

Das Schreiben von Code, der eine Iteration mit async-Funktionen ausführt, kann unübersichtlich sein. Tatsächlich ist es der Kern meiner Lieblingsfrage zu Programmieren in Vorstellungsgesprächen.

Mit asynchroen Generatorfunktionen und dem asynchroen Iterationsprotokoll wird die Nutzung oder Implementierung von Streaming-Datenquellen optimiert und meine Programmieraufgabe wird viel einfacher.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Async-Iteratoren können in for-of-Schleifen verwendet werden und auch, um eigene benutzerdefinierte Async-Iteratoren über Async-Iterator-Fabriken zu erstellen.

Verhalten beim Overscroll

Das Scrollen ist eine der grundlegendsten Möglichkeiten, mit einer Seite zu interagieren. Bestimmte Muster können jedoch schwer zu erkennen sein. Beispielsweise wird bei der Funktion Ziehen, um zu aktualisieren in Browsern, bei der oben auf der Seite nach unten gewischt wird, die Seite komplett neu geladen.

Vorher, mit Aktualisierung der gesamten Seite.

Aktualisieren Sie danach nur die Inhalte.

In einigen Fällen möchten Sie dieses Verhalten möglicherweise überschreiben und Ihre eigene Version bereitstellen. Genau das macht die progressive Web-App von Twitter: Wenn Sie nach unten wischen, werden nicht alle Tweets neu geladen, sondern der aktuellen Ansicht werden einfach neue Tweets hinzugefügt.

Chrome 63 unterstützt jetzt das CSS-Attribut overscroll-behavior. Damit lässt sich das Standard-Overflow-Scrollverhalten des Browsers ganz einfach überschreiben.

Mit ihrer Hilfe können Sie Folgendes tun:

Das Beste daran ist, dass overscroll-behavior keine negativen Auswirkungen auf die Seitenleistung hat.

Änderungen an der Benutzeroberfläche für Berechtigungen

Ich liebe Web-Push-Benachrichtigungen, aber ich bin wirklich frustriert über die Anzahl der Websites, die beim Seitenaufbau ohne Kontext um Erlaubnis bitten. Und ich bin nicht allein.

90 % aller Berechtigungsanfragen werden ignoriert oder vorübergehend blockiert.

In Chrome 59 haben wir damit begonnen, dieses Problem anzugehen, indem wir eine Berechtigung vorübergehend blockieren, wenn der Nutzer die Anfrage dreimal abgelehnt hat. In m63 werden Berechtigungsanfragen in Chrome für Android jetzt in modalen Dialogfeldern angezeigt.

Denken Sie daran, dass dies nicht nur für Push-Benachrichtigungen gilt, sondern für alle Berechtigungsanfragen. Wenn Sie die Berechtigung zum richtigen Zeitpunkt und im richtigen Kontext anfordern, haben wir festgestellt, dass die Wahrscheinlichkeit, dass Nutzer Berechtigungen erteilen, zweieinhalbmal höher ist.

…und vieles mehr

Das sind nur einige der Änderungen in Chrome 63 für Entwickler. Es gibt natürlich noch viele weitere.

  • finally ist jetzt für Promise-Instanzen verfügbar und wird aufgerufen, nachdem eine Promise erfüllt oder abgelehnt wurde.
  • Die neue Device Memory JavaScript API hilft Ihnen, Leistungseinschränkungen zu verstehen, indem Sie Hinweise zur Gesamtmenge des RAM auf dem Gerät des Nutzers erhalten. Sie können die Darstellung bei der Laufzeit anpassen, um die Komplexität auf leistungsschwächeren Geräten zu reduzieren und Nutzern eine bessere Nutzererfahrung zu bieten.
  • Mit der Intl.PluralRules API können Sie Anwendungen erstellen, die die Pluralform einer bestimmten Sprache verstehen. Dazu geben Sie an, welche Pluralform für eine bestimmte Zahl und Sprache gilt. Und kann bei Ordinalzahlen helfen.

Abonniere unseren YouTube-Kanal, um immer über neue Videos informiert zu werden.

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