Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 66

Pete LePage

CSS-manipulatie wordt eenvoudiger met het nieuwe CSS Typed Model Object .
Toegang tot het klembord is nu asynchroon.
Er is een nieuwe weergavecontext voor canvaselementen.

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 66!

Wilt u de volledige lijst met wijzigingen? Bekijk de Chromium-bronrepositorywijzigingslijst .

CSS-getypeerd objectmodel

Als u ooit een CSS-eigenschap via JavaScript heeft bijgewerkt, heeft u het CSS-objectmodel gebruikt. Maar het retourneert alles als een string.

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

Om de eigenschap opacity te animeren, zou ik de string naar een getal moeten casten, vervolgens de waarde moeten verhogen en mijn wijzigingen moeten toepassen. Niet bepaald ideaal.

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

Met het nieuwe CSS Typed Object Model worden CSS-waarden weergegeven als getypte JavaScript-objecten, waardoor veel typemanipulatie wordt geëlimineerd en er een verstandigere manier wordt geboden om met CSS te werken.

In plaats van element.style te gebruiken, krijgt u toegang tot stijlen via de eigenschap .attributeStyleMap of .styleMap . Ze retourneren een kaartachtig object dat het gemakkelijk maakt om te lezen of bij te werken.

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

Vergeleken met het oude CSS-objectmodel laten vroege benchmarks een verbetering van ongeveer 30% zien in het aantal bewerkingen per seconde - iets dat vooral belangrijk is voor JavaScript-animaties.

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

Het helpt ook bij het elimineren van bugs die worden veroorzaakt door het vergeten de waarde van een string naar een getal te converteren, en het regelt automatisch het afronden en vastklemmen van waarden. Bovendien zijn er een aantal mooie nieuwe methoden voor het omgaan met eenheidsconversies, rekenen en gelijkheid.

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

Eric heeft een geweldige post met verschillende demo's en voorbeelden in zijn uitleg .

Asynchrone klembord-API

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

Synchronisch kopiëren en plakken met document.execCommand kan prima zijn voor kleine stukjes tekst, maar voor al het andere is de kans groot dat het synchrone karakter de pagina blokkeert, wat een slechte ervaring voor de gebruiker veroorzaakt. En het toestemmingsmodel tussen browsers is inconsistent.

De nieuwe Async Clipboard API is een vervanging die asynchroon werkt en integreert met de toestemmings-API om gebruikers een betere ervaring te bieden.

Tekst kan naar het klembord worden gekopieerd door writeText() aan te roepen.

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

Omdat deze API asynchroon is, retourneert de functie writeText() een belofte die zal worden opgelost of afgewezen, afhankelijk van of de tekst die we hebben doorgegeven met succes is gekopieerd.

Op dezelfde manier kan tekst vanaf het klembord worden gelezen door getText() aan te roepen en te wachten tot de geretourneerde Promise is opgelost met de tekst.

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

Bekijk Jasons bericht en demo's in de uitleg . Hij heeft ook voorbeelden die async functies gebruiken.

Nieuwe Canvas Context `BitmapRenderer`

Met het canvas kunt u afbeeldingen op pixelniveau manipuleren, grafieken tekenen, foto's manipuleren of zelfs realtime videoverwerking uitvoeren. Maar tenzij u met een leeg canvas begint, heeft u een manier nodig om een afbeelding op het canvas weer te geven.

Historisch gezien betekende dit het maken van een image en het vervolgens weergeven van de inhoud ervan op het canvas . Helaas betekent dit dat de browser meerdere kopieën van de afbeelding in het geheugen moet opslaan.

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

Vanaf Chrome 66 is er een nieuwe asynchrone weergavecontext die de weergave van ImageBitmap objecten heeft gestroomlijnd. Ze renderen nu efficiënter en met minder schokken door asynchroon te werken en geheugenduplicatie te voorkomen.

Om het te gebruiken:

Roep createImageBitmap aan en geef het een afbeeldingsblob om de afbeelding te maken.
Pak de bitmaprenderer -context van het canvas .
Breng vervolgens de afbeelding over.

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

Klaar, ik heb de afbeelding gerenderd!

AudioWerklet

Werkjes zijn binnen! PaintWorklet werd geleverd in Chrome 65 en nu schakelen we AudioWorklet standaard in Chrome 66 in. Dit nieuwe type Worklet kan worden gebruikt om audio in de speciale audiothread te verwerken, ter vervanging van de oude ScriptProcessorNode die op de hoofdthread draaide. Elke AudioWorklet draait in zijn eigen globale bereik, waardoor de latentie wordt verminderd en de doorvoerstabiliteit wordt vergroot.

Er zijn enkele interessante voorbeelden van AudioWorklet op Google Chrome Labs .

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 66 voor ontwikkelaars. Er is natuurlijk nog veel meer.

TextArea en Select ondersteunen nu het autocomplete attribuut.
Het instellen autocapitalize op een form is van toepassing op alle onderliggende formuliervelden, waardoor de compatibiliteit met Safari's implementatie van autocapitalize wordt verbeterd.
trimStart() en trimEnd() zijn nu beschikbaar als de op standaarden gebaseerde manier om witruimte uit tekenreeksen bij te snijden.

Bekijk zeker Nieuw in Chrome DevTools om te zien wat er nieuw is voor DevTools in Chrome 66. En als u geïnteresseerd bent in Progressive Web Apps, bekijk dan de nieuwe PWA Roadshow-videoserie . Klik vervolgens op de abonneerknop op ons YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 67 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!