Как Яндекс.Маркет использует OffscreenCanvas
Хочу продолжить тему локальной работы с файлами из браузера. Мой коллега — Паша Смирнов — выступал на JS Party NSK и Я.Субботнике с докладом "Приключения в отдельном потоке". В докладе он рассказал про то, как сохранить отзывчивость приложения при работе с большими файлами в браузере.
Паша делал UI для поиска по картинке в мобильной версии Яндекс.Маркета. Перед загрузкой изображения на сервер, надо было сжать изображение в браузере. Для сжатия был использован Canvas. Но во время сжатия изображения были заметны лаги в интерфейсе, поэтому он решил вынести обработку в воркер (Worker API), чтобы не блокировать основной поток браузера. Так как в воркере DOM API, а следовательно и Canvas, не доступны, было использовано решение с OffscreenCanvas (это тот же самый Canvas, но для работы из воркеров). Но с OffscreenCanvas тоже есть проблема: на данный момент он поддерживается только в тех браузерах, которые построены на базе Chromium. Было принято решение использовать прогрессивное улучшение:
if (window.OffscreenCanvas) {
// используем решение с OffscreenCanvas и воркером
} else {
// старый вариант с Canvas
}
Идеального решения добиться не получилось, но тем не менее у всех пользователей, которые используют Chrome, изменение размера изображения не вызывает лагов в интерфейсе.
Доклад хороший, рекомендую посмотреть или почитать расшифровку доклада на хабре, если интересует тема работы с Worker API в браузере.