Nowości w Chrome 94

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Domyślna przestrzeń barw dla elementów <canvas> jest teraz oficjalnie zdefiniowana w specyfikacji jako SRGB. Możesz ją zmienić na Display P3.
  • WebCodecs to nowy, niski poziom dostępu do wbudowanych kodeków audio i wideo, który jest ważny w przypadku strumieniowego przesyłania gier, edytorów wideo itp.
  • WebGPU rozpoczyna okres próbny.
  • 6–7 października odbędzie się szczyt PWA.
  • I to nie wszystko .

Nazywam się Pete LePage i pracuję z domu. Zobaczmy, co nowego w Chrome 94 dla deweloperów.

Domyślna przestrzeń kolorów dla elementów canvas

Sposób wyświetlania kolorów na ekranie ma kluczowe znaczenie dla niektórych użytkowników. W przypadku fotografów, ilustratorów pracujących nad grafiką do druku i wielu innych osób kolory na ekranie muszą być zgodne z kolorami drukowanymi. Od wersji 94 Chrome elementy <canvas> są w pełni zarządzane pod kątem kolorów za pomocą profilu sRGB. Wcześniej sRGB było konwencją, ale nie było wyraźnie zdefiniowane w specyfikacji.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

Co ważniejsze, możesz teraz określić, której przestrzeni barw użyć podczas tworzenia obiektu <canvas> renderowania w 2D lub obiektu ImageData, w tym przestrzeni barw P3.

WebCodecs

Dodanie filmu do strony jest bardzo proste. Jeśli jednak chcesz wykonać coś bardziej złożonego i działać z komponentami strumienia wideo, będzie to trudne i zwykle wymaga użycia Web Assembly do przesyłania własnych kodeków.

Jednak dostarczenie własnego kodeka oznacza napisanie kodu, który przeglądarka już ma, a nie może on korzystać z akceleracji sprzętowej. Interfejs Web Codecs API umożliwia korzystanie z komponentów i kodek multimedialnych, które są już dostępne w przeglądarce.

Osobiście zawsze miałem problem z zapamiętaniem odpowiednich przełączników wiersza poleceń do kodowania filmu na potrzeby internetu lub konwertowania pliku GIF na plik wideo. Dzięki interfejsom API dostępnym w ramach WebCodecs mogłem szybko utworzyć aplikację internetową, która odczytuje plik i wyeksportuje odpowiednie pliki potrzebne do wyświetlania treści w internecie.

Ścieżka z Canvasa lub ImageBitmap do sieci lub pamięci.
Ścieżka z Canvas lub ImageBitmap do sieci lub miejsca na dane

aplikacje internetowe, które wymagają pełnej kontroli nad sposobem przetwarzania treści multimedialnych, np. edytory wideo, aplikacje do wideokonferencji, aplikacje do strumieniowego przesyłania danych itp.; Dostęp do wbudowanych w przeglądarki elementów sterowania multimediami jest ogromny.

Trudno jest przedstawić coś przydatnego w 30 sekundach, dlatego zajrzyj na web.dev, gdzie znajdziesz przetwarzanie wideo za pomocą WebCodecs – szczegółowe informacje, mnóstwo kodu i kilka fajnych demonstracji.

WebGPU

WebGPU to nowy interfejs API, który udostępnia nowoczesne możliwości graficzne, w tym Direct3D 12, Metal i Vulkan. Możesz go traktować jak WebGL, ale zapewnia on dostęp do bardziej zaawansowanych funkcji GPU i obsługuje ogólne obliczenia na GPU.

Diagram architektury pokazujący połączenie WebGPU między interfejsami API systemu operacyjnego a Direct3D 12, Metal i Vulkan.
Schemat architektury WebGPU

W Chrome 94 rozpoczynamy testowanie origin, a Safari i Firefox pracują obecnie nad jego wdrożeniem.

Prezentacja Babylon.js symulacji wzburzonego morza przy użyciu shadera obliczeniowego WebGPU.

François opublikował świetny artykuł Dostęp do nowoczesnych funkcji GPU za pomocą WebGPU na stronie web.dev, w którym szczegółowo omawia porównanie wydajności mnożenia macierzy na procesorze i na karcie graficznej. Oto podpowiedź. GPU wygrywa.

szczyt PWA,

6–7 października odbędzie się szczyt PWA. To bezpłatna konferencja online, która pomoże Ci odnieść sukces w przypadku progresywnych aplikacji internetowych. PWA Summit to współpraca między pracownikami kilku firm zaangażowanych w tworzenie technologii PWA: Google, Intel, Microsoft i Samsung.

Znajdziesz tam mnóstwo świetnych wykładów i treści. Więcej informacji znajdziesz na stronie PWASummit.org. Mam nadzieję, że się tam spotkamy.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

Metoda priorytetowa scheduler.postTask() umożliwia planowanie zadań, dynamiczne zmienianie ich priorytetów lub ich anulowanie.

Jeśli kiedykolwiek miałeś(-aś) problem z przearanżowaniem strony po pojawieniu się pasków przewijania, właściwości scrollbar-gutter przypadną Ci do gustu. Umożliwia kontrolowanie obecności pasków przewijania, co pozwala uniknąć zmian układu podczas rozszerzania treści.

Używanie WebSQL w kontekście rozwiązań zewnętrznych zostało wycofane i planowane jest na Chrome 97. Standard bazy danych Web SQL został wycofany w listopadzie 2010 r. Ta funkcja nigdy nie została zaimplementowana w Firefoxie, a w 2019 roku została wycofana z Safari. Gdy liczba użytkowników spadnie do wystarczająco niskiego poziomu, funkcja zostanie wycofana i usunięta z Chrome. Jeśli nadal używasz WebSQL, teraz jest dobry moment na zaplanowanie migracji.

Interfejs API klawiatury wirtualnej daje większą kontrolę nad tym, jak i kiedy wyświetla się wirtualna klawiatura ekranowa. Umożliwia to jawne kontrolowanie zachowania przewijania lub zmian układu podczas pojawiania się i znikania klawiatury.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 94, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Pete LePage i jak tylko pojawi się nowa wersja Chrome 95, opowiem Ci, co nowego w tej przeglądarce.