Nieuw in Chrome 66

Pete LePage

En er is nog veel meer !

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

Wilt u de volledige lijst met wijzigingen bekijken? Bekijk de wijzigingenlijst in de Chromium-bronrepository .

CSS getypt objectmodel

Als je ooit een CSS-eigenschap hebt bijgewerkt via JavaScript, heb je het CSS-objectmodel gebruikt. Maar dat retourneert alles als een string.

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

Om de opacity eigenschap te animeren, zou ik de string naar een getal moeten omzetten, 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. Hierdoor wordt veel van de typmanipulatie overbodig en kunt u op een verstandigere manier met CSS werken.

In plaats van element.style te gebruiken, krijg je toegang tot stijlen via de eigenschap .attributeStyleMap of .styleMap . Ze retourneren een map-achtig object dat gemakkelijk te lezen of bij te werken is.

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

Vergeleken met het oude CSS Object Model laten vroege benchmarks een verbetering van ongeveer 30% zien in 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 om bugs te elimineren die ontstaan ​​doordat men vergeet de waarde van een string naar een getal om te zetten, en het verwerkt automatisch het afronden en afklemmen van waarden. Bovendien zijn er een aantal behoorlijk handige nieuwe methoden voor het omzetten van eenheden, rekenen en gelijkheid.

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

Eric heeft een geweldig bericht met verschillende demo's en voorbeelden in zijn explainer .

Async Klembord API 

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

Synchroon kopiëren en plakken met behulp van document.execCommand kan prima werken voor kleine stukjes tekst, maar voor andere doeleinden is de kans groot dat de synchrone aard ervan de pagina blokkeert, wat een slechte gebruikerservaring oplevert. Bovendien is het permissiemodel tussen browsers 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 Promise die wordt opgelost of afgewezen, afhankelijk van of de tekst die we hebben doorgegeven succesvol is gekopieerd.

Similarly, text can be read from the clipboard by calling getText() and waiting for the returned Promise to resolve with the text.

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 kun je afbeeldingen op pixelniveau bewerken: je kunt grafieken tekenen, foto's bewerken en zelfs realtime video's bewerken. Maar tenzij je met een leeg canvas begint, heb je een manier nodig om een ​​afbeelding op het canvas te renderen.

Historisch gezien betekende dat het aanmaken van een image en het vervolgens renderen 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 renderingcontext die de weergave van ImageBitmap objecten heeft gestroomlijnd. Ze renderen nu efficiënter en met minder haperingen door asynchroon te werken en geheugenduplicatie te voorkomen.

Om het te gebruiken:

  1. Roep createImageBitmap aan en geef er een image blob aan om de afbeelding te maken.
  2. Haal de bitmaprenderer -context uit het canvas .
  3. Breng vervolgens de afbeelding over. 
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Klaar, ik heb de afbeelding gerenderd!

AudioWerkblad

Worklets zijn in! PaintWorklet werd standaard meegeleverd in Chrome 65 en nu schakelen we AudioWorklet standaard in Chrome 66 in. Dit nieuwe type worklet kan worden gebruikt om audio te verwerken in de speciale audiothread, ter vervanging van de oude ScriptProcessorNode die op de hoofdthread draaide. Elke AudioWorklet draait in zijn eigen globale scope, wat de latentie vermindert en de doorvoerstabiliteit verhoogt.

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

En nog veel meer!

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

  • TextArea en Select ondersteunen nu het kenmerk autocomplete .
  • Wanneer u autocapitalize instelt voor een form , wordt dit toegepast op alle onderliggende formuliervelden. Hierdoor wordt de compatibiliteit met Safari's implementatie van autocapitalize verbeterd.
  • trimStart() en trimEnd() zijn nu beschikbaar als op standaarden gebaseerde manier om witruimte uit strings te verwijderen.

Bekijk zeker Nieuw in Chrome DevTools om te ontdekken wat er nieuw is voor DevTools in Chrome 66. En als je 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, vertel ik u graag wat er nieuw is in Chrome!