Новое в Chrome 94

Пит ЛеПейдж

Вот что вам нужно знать:

  • Цветовое пространство по умолчанию для элементов <canvas> теперь формально определено в спецификации как SRGB , и вы можете изменить его на Display P3 .
  • WebCodecs — это новый низкоуровневый способ доступа к встроенным аудио- и видеокодекам, важный для потоковых игр, видеоредакторов и т. д.
  • WebGPU начинает пробную версию.
  • Саммит PWA пройдет 6-7 октября.
  • И есть еще много чего .

Я Пит ЛеПейдж , работаю и снимаю из дома. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 94.

Цветовое пространство по умолчанию для элементов canvas

То, как цвет отображается на экране, имеет решающее значение для некоторых пользователей. Для фотографов, иллюстраторов печати и многих других цвета на экране должны соответствовать тому, что напечатано. Начиная с Chrome 94, элементы <canvas> полностью управляются цветом с помощью sRGB . Раньше sRGB был общепринятым, но не определялся явно в спецификации.

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

Что еще более важно, теперь вы можете указать, какое цветовое пространство использовать при создании 2D-объекта контекста рендеринга <canvas> или объекта ImageData , включая цветовое пространство P3.

Вебкодеки

Разместить видео на странице достаточно просто. Но если вам нужно сделать что-то более сложное и взаимодействовать с компонентами видеопотока, это сложно и обычно требует использования веб-сборки для доставки собственных кодеков !

Но доставка собственного кодека означает написание кода, который уже есть в браузере, и он не сможет воспользоваться преимуществами аппаратного ускорения! API веб-кодеков позволяет использовать медиакомпоненты и кодеки, которые уже есть в браузере.

Лично мне всегда было трудно запомнить правильные параметры командной строки для кодирования видео для Интернета или преобразования GIF в видеофайл. Используя API, доступные через WebCodecs, я мог быстро создать веб-приложение, которое считывает файл и экспортирует правильные файлы, необходимые для Интернета.

Путь от Canvas или ImageBitmap к сети или хранилищу.
Путь от Canvas или ImageBitmap к сети или хранилищу.

Веб-приложения, которым требуется полный контроль над обработкой медиаконтента, например видеоредакторы, видеоконференции, потоковые приложения и т. д. Доступ к браузерам, встроенным в элементы управления мультимедиа, огромен.

Показать что-то полезное за тридцать секунд сложно, поэтому ознакомьтесь с разделом «Обработка видео с помощью WebCodecs» на веб-сайте web.dev, чтобы узнать больше о большом количестве кода и нескольких классных демонстрациях!

Веб-графический процессор

WebGPU — это новый API, который предоставляет современные графические возможности, в частности Direct3D 12, Metal и Vulkan. Вы можете думать об этом как о WebGL, но он обеспечивает доступ к более продвинутым функциям графического процессора, а также обеспечивает поддержку выполнения общих вычислений на графическом процессоре .

Схема архитектуры, показывающая соединение WebGPU между API-интерфейсами ОС и Direct3D 12, Metal и Vulkan.
Схема архитектуры WebGPU

Начинается пробная версия Origin в Chrome 94, и Safari и Firefox в настоящее время работают над их реализацией.

Демо-версия Babylon.js, изображающая бурное море, моделируемая с использованием возможностей вычислительного шейдера WebGPU.

У Франсуа есть отличная статья «Доступ к современным функциям графического процессора с помощью WebGPU» на веб-сайте web.dev, в которой подробно сравнивается производительность умножения матриц, выполняемого на процессоре и графическом процессоре. Вот подсказка. Графический процессор побеждает .

Саммит PWA

Саммит PWA пройдет 6-7 октября. Это бесплатная онлайн-конференция, призванная помочь каждому добиться успеха с помощью Progressive Web Apps. Саммит PWA — это сотрудничество представителей нескольких компаний, участвующих в создании технологий PWA: Google, Intel, Microsoft и Samsung.

Есть масса отличных докладов и контента. Узнать больше и зарегистрироваться можно на PWASummit.org . Я надеюсь увидеть тебя там!

И многое другое!

Конечно, есть еще много чего.

Приоритизированный метод scheduler.postTask() позволяет планировать задачи и динамически изменять их приоритеты или отменять их все вместе.

Если вы когда-либо сталкивались с изменением макета при появлении полос прокрутки, свойство scrollbar-gutter вас порадует. Он обеспечивает контроль над наличием полей прокрутки, позволяя предотвратить изменения макета по мере расширения содержимого.

Использование WebSQL в сторонних контекстах теперь устарело , и ожидается его удаление в Chrome 97. От стандарта базы данных Web SQL отказались в ноябре 2010 года. Он никогда не был реализован в Firefox и устарел в Safari в 2019 году. Он будет объявлен устаревшим. и удаляется из Chrome, когда использование становится достаточно низким. Если вы все еще используете WebSQL, сейчас самое время начать планировать переход с него.

А API виртуальной клавиатуры дает вам больше контроля над тем, как и когда отображается виртуальная экранная клавиатура. Он позволяет вам явно контролировать любое поведение прокрутки или изменения раскладки при появлении или исчезновении клавиатуры.

Дальнейшее чтение

Это касается только некоторых ключевых моментов. Перейдите по ссылкам ниже, чтобы узнать о дополнительных изменениях в Chrome 94.

Подписаться

Чтобы быть в курсе событий, подпишитесь на канал разработчиков Chrome на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 95, я буду здесь, чтобы рассказать вам, что нового в Chrome!