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.

Möchten Sie die vollständige Liste der Änderungen sehen? Liste der Änderungen im 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 wird jedoch alles als String zurückgegeben.

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

Um das Attribut opacity zu animieren, müsste ich den String in eine Zahl umwandeln, den Wert dann inkrementieren und die Ä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 Typed Object Model werden CSS-Werte als typisierte JavaScript-Objekte verfügbar gemacht. Dadurch entfällt ein Großteil der Typmanipulation und die Arbeit mit CSS wird vereinfacht.

Anstelle von element.style greifen Sie über die Eigenschaft .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!

Erste Benchmarks zeigen, dass sich die Anzahl der Vorgänge pro Sekunde im Vergleich zum alten CSS-Objektmodell um etwa 30 % verbessert hat. 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 werden Fehler vermieden, die dadurch entstehen, dass der Wert nicht von einem String in eine Zahl umgewandelt wird. Das Runden und Begrenzen von Werten wird automatisch übernommen. Außerdem gibt es einige ziemlich praktische neue Methoden für den Umgang mit Einheitenumrechnungen, Arithmetik und Gleichheit.

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

Eric hat in seinem Blogbeitrag mehrere Demos und Beispiele veröffentlicht.

Async Clipboard API

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

Synchrones Kopieren und Einfügen mit document.execCommand kann für kurze Textabschnitte in Ordnung sein. In allen anderen Fällen wird die Seite jedoch wahrscheinlich blockiert, was zu einer schlechten Nutzererfahrung führt. Außerdem ist das Berechtigungsmodell zwischen den Browsern inkonsistent.

Die neue Async Clipboard API ist ein asynchron funktionierender Ersatz, der in die Permission API eingebunden ist, um Nutzern eine bessere Erfahrung zu bieten.

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 Funktion writeText() ein Promise zurück, das je nachdem, ob der übergebene Text erfolgreich kopiert wurde, aufgelöst oder abgelehnt wird.

Ebenso kann Text aus der Zwischenablage gelesen werden, indem getText() aufgerufen wird und darauf gewartet wird, dass das zurückgegebene Promise mit dem Text aufgelöst wird.

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

Im Blogpost von Jason finden Sie weitere Informationen und Demos. Er hat auch Beispiele für die Verwendung von async-Funktionen.

Neuer Canvas-Kontext BitmapRenderer

Mit dem canvas-Element können Sie Grafiken auf Pixelebene bearbeiten, Diagramme zeichnen, Fotos bearbeiten oder sogar Videos in Echtzeit verarbeiten. Wenn Sie nicht mit einem leeren canvas beginnen, benötigen Sie eine Möglichkeit, ein Bild auf dem canvas zu rendern.

Bisher musste dazu ein image-Tag erstellt und sein Inhalt im canvas gerendert werden. Das bedeutet leider, 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 mit weniger Ruckeln gerendert, da sie asynchron arbeiten und Speicherkopien vermeiden.

Dabei gilt:

  1. Rufen Sie createImageBitmap auf und übergeben Sie einen Image-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 und jetzt aktivieren wir AudioWorklet standardmäßig in Chrome 66. Dieser neue Worklet-Typ kann verwendet werden, um Audio im dedizierten Audio-Thread zu verarbeiten. Er ersetzt den alten ScriptProcessorNode, der im Hauptthread ausgeführt wurde. Jedes AudioWorklet wird in einem eigenen globalen Bereich ausgeführt, wodurch die Latenz verringert und die Durchsatzstabilität erhöht wird.

Google Chrome Labs bietet einige interessante Beispiele für AudioWorklet.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 66 für Entwickler.

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

Neu in den Chrome-Entwicklertools Wenn Sie sich für progressive Web-Apps interessieren, sehen Sie sich die neue PWA Roadshow-Videoserie an. Klicke dann auf unserem YouTube-Kanal auf die Schaltfläche Abonnieren. Du erhältst dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 67 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.