Nowości w Chrome 66

Pete LePage

A to nie wszystko – to tylko część.

Mam na imię Pete LePage. Sprawdź, co nowego w Chrome 66 dla deweloperów.

Chcesz zobaczyć pełną listę zmian? Sprawdź listę zmian w repozytorium źródłowym Chromium.

Typowany model obiektów CSS

Jeśli kiedykolwiek aktualizowałeś/aś właściwość CSS za pomocą JavaScriptu, użyłaś/używałeś modelu obiektu CSS. Zwraca jednak wszystko jako ciąg znaków.

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

Aby animować właściwość opacity, muszę rzutować ciąg znaków na liczbę, a następnie zwiększyć jej wartość i zastosować zmiany. Nie do końca idealnie.

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

Dzięki nowemu modelowi typów obiektów CSS wartości CSS są udostępniane jako typy obiektów JavaScript, co eliminuje wiele manipulacji typami i zapewnia bardziej sensowny sposób pracy z CSS.

Zamiast element.style możesz uzyskiwać dostęp do stylów za pomocą właściwości .attributeStyleMap lub .styleMap. Zwracają obiekt podobny do mapy, który ułatwia odczytywanie i aktualizowanie.

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

Wstępne testy porównawcze wskazują, że w porównaniu ze starym modelem obiektów CSS wydajność operacji na sekundę wzrosła o około 30%, co jest szczególnie ważne w przypadku animacji JavaScript.

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

Pomaga też wyeliminować błędy spowodowane zapomnieniem przekształcenia wartości z łańcucha znaków na liczbę, a także automatycznie zaokrągla i ogranicza wartości. Dostępne są też całkiem przydatne nowe metody obsługi konwersji jednostek, działań arytmetycznych i równości.

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

Eric opublikował świetny artykuł z kilkoma demonstracjami i przykładami w artykule.

Async Clipboard API

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

Synchroniczne kopiowanie i wklejanie za pomocą document.execCommand może być odpowiednie w przypadku małych fragmentów tekstu, ale w pozostałych przypadkach synchronizacja może spowodować zablokowanie strony, co spowoduje nieprzyjemne wrażenia użytkownika. Model uprawnień w różnych przeglądarkach jest niespójny.

Nowy interfejs Async Clipboard API jest jego zamiennikiem, który działa asynchronicznie i integruje się z interfejsem Permission API, aby zapewnić większą wygodę użytkownikom.

Tekst można skopiować do schowka, wywołując writeText().

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

Ponieważ ten interfejs API jest asynchroniczny, funkcja writeText() zwraca obietnicę, która zostanie rozwiązana lub odrzucona w zależności od tego, czy tekst został skopiowany.

Podobnie tekst można odczytać ze schowka, wywołując funkcję getText() i oczekując na zwróconą obietnicę, która zwróci tekst.

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

Przeczytaj wpis Jasona i obejrzyj jego demonstracje w artykule. Znajdziesz tam też przykłady, które wykorzystują funkcje async.

Nowy kontekst obszaru roboczego BitmapRenderer

Element canvas umożliwia manipulowanie grafiką na poziomie piksela. Możesz tworzyć wykresy, manipulować zdjęciami, a nawet przetwarzać filmy w czasie rzeczywistym. Jeśli jednak nie zaczynasz od pustego canvas, musisz znaleźć sposób na renderowanie obrazu na canvas.

Wcześniej oznaczało to utworzenie tagu image, a następnie wyrenderowanie jego zawartości w tagu canvas. Oznacza to, że przeglądarka musi przechowywać w pamięci wiele kopii obrazu.

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

Od wersji 66 Chrome dostępna jest nowa funkcja asynchronicznego renderowania, która upraszcza wyświetlanie obiektów ImageBitmap. Teraz renderują się one wydajniej i płynniej, ponieważ działają asynchronicznie i nie dublują pamięci.

Aby z niej korzystać:

  1. Aby utworzyć obraz, wywołaj funkcję createImageBitmap i przekaż jej blob obrazu.
  2. Pobierz kontekst bitmaprenderer z canvas.
  3. Następnie prześlij obraz.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Gotowe, obraz został wyrenderowany.

AudioWorklet

Worklety są już dostępne PaintWorklet został udostępniony w Chrome 65, a teraz włączamy AudioWorklet domyślnie w Chrome 66. Ten nowy typ elementu Worklet można używać do przetwarzania dźwięku w dedykowanym wątku audio, co zastępuje starszą metodę ScriptProcessorNode, która działała w wątku głównym. Każdy moduł AudioWorklet działa w ramach własnego zakresu globalnego, co zmniejsza opóźnienia i zwiększa stabilność przepustowości.

W Google Chrome Labs znajdziesz kilka interesujących przykładów AudioWorklet.

I inne funkcje

To tylko kilka z wielu zmian w Chrome 66 dla deweloperów.

  • Atrybuty TextArea i Select obsługują teraz atrybut autocomplete.
  • Ustawienie autocapitalize w elemencie form będzie miało zastosowanie do wszystkich pól podrzędnych formularza, co zwiększa zgodność z implementacją autocapitalize w Safari.
  • trimStart() i trimEnd() są teraz dostępne jako sposób na skracanie białych znaków w ciągu znaków zgodny ze standardami.

Zapoznaj się z artykułem Nowości w Narzędziach deweloperskich w Chrome, aby dowiedzieć się, co nowego w Narzędziach deweloperskich w Chrome 66. Jeśli interesują Cię progresywne aplikacje internetowe, obejrzyj nową serię filmów o PWA. Następnie kliknij przycisk Subskrybuj na naszym kanale w YouTube. Otrzymasz e-maila z powiadomieniem za każdym razem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 67 opowiem Ci, co nowego w tej wersji przeglądarki.