Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in Chrome 66

Pete LePage

Mit dem neuen CSS-typisierten Modellobjekt wird die CSS-Bearbeitung einfacher.
Der Zugriff auf die Zwischenablage erfolgt jetzt asynchron.
Es gibt einen neuen Renderingkontext für Canvas-Elemente.

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 66 gibt.

Möchtest du die vollständige Liste der Änderungen sehen? Weitere Informationen finden Sie in der Änderungsliste des Chromium-Quell-Repositorys.

CSS-Typiertes Objektmodell

Wenn Sie jemals eine CSS-Property über JavaScript aktualisiert haben, haben Sie das CSS-Objektmodell verwendet. Aber sie gibt alles als String zurück.

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

Um die opacity-Eigenschaft zu animieren, müsste ich den String in eine Zahl umwandeln, den Wert erhöhen 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 Typed Object Model werden CSS-Werte als typisierte JavaScript-Objekte angezeigt. Dadurch wird ein Großteil der Typmanipulation eliminiert und die Arbeit mit CSS wird effizienter.

Anstatt element.style zu verwenden, greifen Sie Stile über die .attributeStyleMap-Property oder über .styleMap 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 Steigerung der Vorgänge pro Sekunde um etwa 30 %. Dies ist bei JavaScript-Animationen besonders wichtig.

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

Außerdem lassen sich damit Fehler vermeiden, die durch das Vergessen, den Wert von einem String in eine Zahl umzuwandeln, auftreten. Außerdem werden die Werte automatisch gerundet und aufgerundet. Außerdem gibt es einige ziemlich interessante neue Methoden für die Verarbeitung von Einheitenumrechnungen, Arithmetik und Gleichheit.

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

Eric hat einen tollen Beitrag mit mehreren Demos und Beispielen in seiner Erklärung.

Async Clipboard API

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

Das synchrone Kopieren und Einfügen mit document.execCommand kann bei kleinen Textpassagen in Ordnung sein. Bei anderen Inhalten besteht jedoch die Möglichkeit, dass die Seite durch synchrone Inhalte blockiert wird und die Nutzerfreundlichkeit beeinträchtigt wird. Außerdem ist das Berechtigungsmodell zwischen Browsern nicht einheitlich.

Die neue Async Clipboard API ist ein Ersatz, der asynchron funktioniert und sich in die Permission API integrieren lässt, 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 Promise zurück, das aufgelöst oder abgelehnt wird, je nachdem, ob der übergebene Text erfolgreich kopiert wurde.

In ähnlicher Weise kann Text aus der Zwischenablage gelesen werden. Dazu rufen Sie getText() auf und warten darauf, dass das zurückgegebene Promise-Objekt mit dem Text aufgelöst wird.

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

Sieh dir Jasons Beitrag und Demos in der Erklärung an. Außerdem findet er Beispiele für die Verwendung von async-Funktionen.

Neuer Canvas-Kontext `BitmapRenderer`

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

In der Vergangenheit wurde ein image-Tag erstellt und dessen Inhalt im canvas gerendert. Leider bedeutet dies, 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 Renderingkontext, der die Anzeige von ImageBitmap-Objekten optimiert. Sie rendern jetzt effizienter und mit weniger Verzögerung, da sie asynchron arbeiten und Speicherduplikate vermeiden.

So verwenden Sie sie:

Rufen Sie createImageBitmap auf und übergeben Sie ein Bild-Blob, um das Bild zu erstellen.
Rufen Sie den bitmaprenderer-Kontext aus canvas ab.
Übertragen Sie das Bild dann hinein.

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Fertig, ich habe das Bild gerendert!

AudioWorklet

Worklets sind da! PaintWorklet wird in Chrome 65 bereitgestellt. Jetzt wird AudioWorklet in Chrome 66 standardmäßig aktiviert. Dieser neue Worklet-Typ kann verwendet werden, um Audio im dedizierten Audio-Thread zu verarbeiten. Dadurch wird der alte ScriptProcessorNode, der im Hauptthread ausgeführt wurde, ersetzt. Jedes AudioWorklet wird in seinem eigenen globalen Bereich ausgeführt, wodurch die Latenz reduziert und die Durchsatzstabilität erhöht wird.

Einige interessante Beispiele für AudioWorklet finden Sie in Google Chrome Labs.

…und vieles mehr

Dies sind nur einige der Änderungen für Entwickler in Chrome 66. Und natürlich gibt es noch viel mehr.

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, wodurch die Kompatibilität mit der autocapitalize-Implementierung von Safari verbessert wird.
trimStart() und trimEnd() sind jetzt als standardbasierte Methode zum Entfernen von Leerzeichen aus Strings verfügbar.

Sieh dir Neu in den Chrome-Entwicklertools an, um zu erfahren, was es Neues in den Entwicklertools in Chrome 66 gibt. Wenn Sie an progressiven Web-Apps interessiert sind, sehen Sie sich die neue PWA-Roadshow-Videoreihe an. Klicke anschließend in unserem YouTube-Kanal auf die Schaltfläche Abonnieren. Du wirst per E-Mail über die Veröffentlichung eines neuen Videos benachrichtigt.

Ich bin Pete LePage. Sobald Chrome 67 veröffentlicht wird, melde ich Ihnen, was es Neues in Chrome gibt!