Nowości w Chrome 66

Pete LePage

• Manipulacja CSS staje się łatwiejsza dzięki nowemu obiektowi modelu CSS typu.
• Dostęp do schowka jest teraz asynchroniczny.
• Udostępniamy nowy kontekst renderowania dla elementów canvas.

A to wiele innych!

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla deweloperów w Chrome 66.

Chcesz poznać pełną listę zmian? Sprawdź listę zmian repozytorium źródłowego Chromium.

Model obiektu typu CSS

Jeśli właściwości CSS były kiedykolwiek aktualizowane za pomocą JavaScriptu, korzystasz z modelu obiektów CSS. Zwraca jednak wszystko w postaci ciągu znaków.

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

Aby animować właściwość opacity, musiałbym rzutować ciąg znaków na liczbę, a następnie zwiększyć wartość i zastosować zmiany. Nie 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);
  }
}

W nowym modelu obiektu CSS z typami wartości CSS są wyświetlane jako obiekty JavaScriptu, co eliminuje konieczność manipulacji typami i zapewnia bardziej sensowny sposób pracy z CSS.

Zamiast używać element.style, do stylów uzyskujesz dostęp przez właściwość .attributeStyleMap lub .styleMap. Zwracają obiekt przypominający mapę, który ułatwia odczytanie lub aktualizację.

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

W porównaniu ze starym modelem obiektowym CSS we wczesnej fazie testów porównawczych stwierdzono, że liczba 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 zapominaniem o rzucaniu wartości z ciągu na liczbę. Automatycznie obsługuje zaokrąglanie i ograniczanie wartości. Pojawiły się też nowe, całkiem nowe metody radzenia sobie z przeliczaniem jednostek, arytmetą i równością.

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

Eric zamieścił świetny post z kilkoma demonstracjami i przykładami w swoim objaśnieniu.

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 z innych powodów istnieje duże prawdopodobieństwo, że synchroniczna natura strony zostanie zablokowana, co niekorzystnie wpłynie na wrażenia użytkownika. Ponadto model uprawnień między przeglądarkami jest niespójny.

Nowy interfejs Async Clipboard API to zamiennik, który działa asynchronicznie i jest zintegrowany z interfejsem API uprawnień, aby zapewnić użytkownikom lepsze wrażenia.

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

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

Ten interfejs API jest asynchroniczny, dlatego funkcja writeText() zwraca obietnicę, która zostanie rozpatrzona lub odrzucona w zależności od tego, czy przekazany tekst został skopiowany.

Tekst można też odczytać ze schowka, wywołując funkcję getText() i oczekując na rozwiązanie zwróconej obietnicy za pomocą tekstu.

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

Przeczytaj post i prezentacje Jasona w wyjaśnieniu. Poniżej znajdziesz też przykłady korzystania z funkcji async.

Nowy kontekst Canvas BitmapRenderer

Element canvas pozwala zmieniać grafikę na poziomie pikseli, rysować wykresy, edytować zdjęcia, a nawet przetwarzać filmy w czasie rzeczywistym. Jeśli jednak nie zaczniesz od pustego pola canvas, musisz znaleźć sposób na renderowanie obrazu w canvas.

W przeszłości oznaczało to utworzenie tagu image, a następnie renderowanie jego treści na platformie canvas. Niestety oznacza to, że przeglądarka musi zapisywać 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';

W Chrome 66 wprowadziliśmy nowy kontekst renderowania asynchronicznego, który upraszcza wyświetlanie obiektów ImageBitmap. Renderowanie działa teraz asynchronicznie i pozwala uniknąć duplikowania pamięci.

Aby go użyć:

1. Wywołaj aplikację createImageBitmap i przekaż mu obraz blob, aby utworzyć obraz.
2. Pobierz kontekst dla: bitmaprenderer z: canvas.
3. Następnie przenieś obraz do niego.

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

Gotowe, obraz został wyrenderowany.

AudioWorklet

Worklety są gotowe! PaintWorklet został udostępniony w Chrome 65, a teraz w Chrome 66 domyślnie włączamy AudioWorklet. Ten nowy typ Worklet może służyć do przetwarzania dźwięku w specjalnym wątku audio, zastępując starsza wersja ScriptProcessorNode, która była uruchamiana w wątku głównym. Każdy element AudioWorklet działa we własnym zakresie globalnym, co zmniejsza opóźnienia i zwiększa stabilność przepustowości.

Ciekawe przykłady zastosowania AudioWorklet znajdziesz w Laboratorium Google Chrome.

…i wiele innych.

To tylko niektóre z zmian wprowadzonych w Chrome 66 dla programistów, oczywiście, jest ich jeszcze sporo.

• TextArea i Select obsługują teraz atrybut autocomplete.
• Ustawienie autocapitalize w elemencie form będzie miało wpływ na wszystkie podrzędne pola formularza, co zwiększy zgodność z implementacją autocapitalize w Safari.
• Metody trimStart() i trimEnd() są teraz dostępne jako oparty na standardach sposób usuwania spacji z ciągów znaków.

Zapoznaj się z artykułem Nowości w Narzędziach deweloperskich w Chrome, aby poznać nowości w Narzędziach deweloperskich w Chrome 66. Jeśli interesuje Cię progresywne aplikacje internetowe, obejrzyj nową serię filmów PWA Roadshow. Potem kliknij przycisk Subskrybuj na naszym kanale w YouTube, a za każdym razem, gdy udostępnimy nowy film, otrzymasz e-maila z powiadomieniem.

Jestem Pete LePage i jak tylko pojawi się Chrome 67, dam Ci znać, co nowego w Chrome.