Neu in Chrome 66

Pete LePage

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 66 gibt.

Vollständige Liste der Änderungen ansehen Liste der Änderungen am Chromium-Quell-Repository

CSS Typed Object Model

Wenn Sie schon einmal eine CSS-Eigenschaft über JavaScript aktualisiert haben, haben Sie das CSS-Objektmodell verwendet. Es gibt jedoch alles als String zurück.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

Wenn ich die Eigenschaft opacity animieren möchte, müsste ich den String in eine Zahl umwandeln, den Wert dann inkrementieren und meine Änderungen anwenden. Nicht gerade ideal.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Mit dem neuen CSS-Typobjektmodell werden CSS-Werte als typisierte JavaScript-Objekte freigegeben, wodurch viele Typmanipulationen entfallen und die Arbeit mit CSS sinnvoller wird.

Anstatt element.style zu verwenden, greifen Sie über die Property .attributeStyleMap oder .styleMap auf Stile zu. Sie geben ein kartenähnliches Objekt zurück, das sich leicht lesen oder aktualisieren lässt.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Im Vergleich zum alten CSS-Objektmodell zeigen erste Benchmarks eine Verbesserung der Vorgänge pro Sekunde um etwa 30 %. Das ist besonders wichtig für JavaScript-Animationen.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Außerdem können Sie damit Fehler vermeiden, die durch das Vergessen des Umwandelns eines Werts von einem String in eine Zahl verursacht werden. Außerdem werden Werte automatisch gerundet und begrenzt. Außerdem gibt es einige ziemlich praktische neue Methoden für die Umwandlung von Einheiten, die Arithmetik und die Gleichheit.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric hat einen tollen Artikel mit mehreren Demos und Beispielen in seinem Erläuterungsartikel.

Async Clipboard API

const successful = document.execCommand('copy');

Synchrones Kopieren und Einfügen mit document.execCommand kann für kleine Textmengen in Ordnung sein, bei allem anderen besteht jedoch eine hohe Wahrscheinlichkeit, dass die Seite aufgrund der Synchronität blockiert wird, was zu einer schlechten Nutzererfahrung führt. Außerdem ist das Berechtigungsmodell zwischen den Browsern nicht einheitlich.

Die neue Async Clipboard API ist ein Ersatz, der asynchron funktioniert und in die Berechtigungs-API eingebunden ist, um die Nutzerfreundlichkeit zu verbessern.

Text kann durch Aufrufen von writeText() in die Zwischenablage kopiert werden.

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Da diese API asynchron ist, gibt die writeText()-Funktion ein Versprechen zurück, das je nachdem, ob der übergebene Text erfolgreich kopiert wurde, erfüllt oder abgelehnt wird.

Ebenso kann Text aus der Zwischenablage gelesen werden, indem getText() aufgerufen und auf die Auflösung des zurückgegebenen Promise mit dem Text gewartet wird.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Sehen Sie sich den Beitrag und die Demos von Jason in der Erläuterung an. Er hat auch Beispiele mit async-Funktionen.

Neuer Canvas-Kontext BitmapRenderer

Mit dem Element canvas können Sie Grafiken auf Pixelebene bearbeiten, Diagramme zeichnen, Fotos bearbeiten oder sogar Videoverarbeitung in Echtzeit durchführen. Sofern Sie nicht mit einer leeren canvas beginnen, benötigen Sie eine Möglichkeit, ein Bild auf der canvas zu rendern.

Bisher bedeutete das, ein image-Tag zu erstellen und den Inhalt dann in der canvas zu rendern. Leider bedeutet das, dass der Browser mehrere Kopien des Bildes im Arbeitsspeicher speichern muss.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

Ab Chrome 66 gibt es einen neuen asynchronen Rendering-Kontext, der die Darstellung von ImageBitmap-Objekten optimiert. Sie werden jetzt effizienter und ruckelfreier gerendert, da sie asynchron arbeiten und die Speicherduplizierung vermieden wird.

Dabei gilt:

  1. Rufen Sie createImageBitmap auf und übergeben Sie ihm einen Bild-Blob, um das Bild zu erstellen.
  2. Rufen Sie den bitmaprenderer-Kontext aus dem canvas ab.
  3. Übertragen Sie dann das Bild.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Fertig, ich habe das Bild gerendert.

AudioWorklet

Worklets sind da! PaintWorklet wurde in Chrome 65 eingeführt. In Chrome 66 aktivieren wir jetzt standardmäßig AudioWorklet. Mit diesem neuen Worklet-Typ kann Audio im speziellen Audio-Thread verarbeitet werden. Damit wird der alte ScriptProcessorNode ersetzt, der im Hauptthread ausgeführt wurde. Jedes AudioWorklet wird in einem eigenen globalen Umfang ausgeführt, wodurch die Latenz verringert und die Durchsatzstabilität erhöht wird.

In Google Chrome Labs finden Sie einige interessante Beispiele für AudioWorklets.

…und vieles mehr

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

  • TextArea und Select unterstützen jetzt das Attribut autocomplete.
  • Wenn Sie autocapitalize für ein form-Element festlegen, wird dies auf alle untergeordneten Formularfelder angewendet. Dadurch wird die Kompatibilität mit der autocapitalize-Implementierung von Safari verbessert.
  • trimStart() und trimEnd() sind jetzt als standardbasierte Methode zum Entfernen von Leerzeichen aus Strings verfügbar.

Weitere Informationen zu den Neuerungen in den Chrome-Entwicklertools in Chrome 66 finden Sie unter Neu in den Chrome-Entwicklertools. Wenn Sie sich für progressive Web-Apps interessieren, sehen Sie sich die neue Videoreihe zur PWA Roadshow an. Klicke dann auf unserer YouTube-Seite auf die Schaltfläche Abonnieren. Du erhältst dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

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