Изображения и фотографии · Конвертер изображений и компрессор
Как Web Workers и OffscreenCanvas обеспечивают оперативность преобразования изображений
· Как это работает
обработка браузера холст веб-работники
Кодирование большого изображения занимает реальное CPU времени, а выполнение этого в основном потоке приведет к зависанию страницы. В этом посте объясняется, как Web Workers и OffscreenCanvas выносят эту работу из потока пользовательского интерфейса и что эта архитектура означает для конфиденциальности и ограничений.
Зависающая вкладка — что происходит, когда в потоке, который также рисует страницу, выполняется тяжелое кодирование
Декодирование, перерисовка и кодирование пакета требуют CPU работы и памяти декодированных пикселей. Если бы каждая операция выполнялась в одном и том же цикле событий, который обрабатывает элементы управления, обновления прогресса и отрисовку, интерфейс мог бы перестать отвечать до тех пор, пока файл не завершится. Таким образом, сфокусированная панель лениво создает рабочий модуль, когда начинается первая конверсия, вместо того, чтобы платить начальные затраты за посетителя, который никогда не конвертируется.
Отзывчивость — это архитектурная цель, а не обещанный срок. Загрузка устройства, размеры изображения, реализация браузера и состав пакета по-прежнему определяют, насколько плавно ощущается страница. Сверьтесь с репрезентативными файлами на важных устройствах; не публикуйте универсальную продолжительность конверсии и не утверждайте, что работник делает дорогую работу бесплатной.
Основной поток и почему он ценен — один поток для верстки, ввода и скриптов, и как долго задачи блокируют все три
Основной поток владеет DOM и элементами управления, к которым прикасается посетитель. ToolAcre использует его для проверки выбора, краткого декодирования исходных размеров, настроек сборки, статуса рендеринга и загрузки результатов. Повторяющийся цикл декодирования, рисования холста и кодирования пакета находится за `image.worker.js`, позволяя сообщениям о ходе выполнения возвращаться между файлами.
Рабочий не исключает каждую задачу основного потока. Каждый выбранный файл изначально проверяется и измеряется на панели, а результаты позже превращаются там в предварительный просмотр и действия по загрузке. Дизайн уводит повторяющийся тяжелый конвейер от владения интерфейсом, сохраняя при этом API-интерфейсы браузера и представление в контексте, к которому они принадлежат.
Веб-воркеры: второй поток без DOM — что может и не может трогать воркер и как к нему попадают файлы
У работника нет обычного доступа DOM. Он получает сериализуемые описания элементов, настройки и ArrayBuffer каждого файла. Для каждого элемента он создает тот же чистый план преобразования, который используется интерфейсом, создает Blob, выполняет декодирование-рисование-кодирование, преобразует полученный Blob в байты и записывает сбой для каждого файла, не отказываясь от остальной части пакета.
Эта изоляция также влияет на обработку ошибок. Поврежденный файл может попасть в массив сбоев, в то время как последующие элементы продолжают работу. Рабочий проверяет наличие отмены между элементами и сообщает о ходе выполнения с текущим именем файла. Пользовательский интерфейс преобразует тайм-аут рабочего в совет попробовать меньшее или меньшее количество изображений, а не оставлять отключенную кнопку без объяснения причин.
OffscreenCanvas: рисование и кодирование без видимого элемента — как рабочий получает собственный холст и вызывает ConvertToBlob
`createCanvas` предпочитает `OffscreenCanvas`, когда конструктор существует. Внутри этого пути `encodeCanvas` вызывает `convertToBlob` с целевым типом MIME и дополнительным качеством. Тот же модуль рендеринга также может создать холст HTML и использовать `toBlob` на основе обратного вызова, сохраняя запасной вариант для контекстов, где OffscreenCanvas недоступен.
Резервный вариант важно описать точно. OffscreenCanvas является предпочтительным, а не единственным возможным холстом в исходном коде. Аналогично, кодировка WebP браузера проверяется по конечному результату кодирования, а не предполагает поддержку декодирования. Приложение обещает ошибку, когда запрошенный кодировщик не может создать формат, а не тихую замену другим типом MIME.
Передаваемые объекты и копии — перемещение ImageBitmap или ArrayBuffer в рабочий процесс без дублирования десятков мегабайт.
Перед вызовом работника панель считывает каждый файл в ArrayBuffer и включает эти буферы в список передачи. Право собственности переходит к работнику вместо клонирования каждого входного буфера. После кодирования исполнитель упаковывает байты Blob в Uint8Array и регистрирует этот резервный буфер для передачи по пути ответа.
Это уменьшает количество копирования, которого можно избежать, но декодированные изображения и холсты по-прежнему занимают память. `executePlan` закрывает каждый ImageBitmap в блоке `finally`, чтобы его декодированные пиксели можно было быстро освободить. Передаваемые объекты, явная очистка растровых изображений и защита пиксельного бюджета устраняют различные источники давления; никто не разрешает подавать неограниченные пакетные претензии.
Почему эта архитектура также является историей конфиденциальности — весь конвейер живет на вашей вкладке, а сетевая панель хранит молчание
Код преобразования вызывает API изображений браузера и холста без запроса на загрузку файла. Модульное тестирование защищает планирование для каждой поддерживаемой комбинации ввода-вывода с запрещенным доступом к сети. Заявление о конфиденциальности конфигурации соответственно узкое: код инструмента не делает запроса, передающего файл, вставленный текст или сгенерированный вывод.
Сама страница по-прежнему может загружать ресурсы сайта и раскрывать внешние скрипты, поэтому «тихая сетевая панель» требует интерпретации. Очистите DevTools после загрузки и найдите характерное, безвредное имя тестового файла или байты полезной нагрузки в новых запросах. Проверка исходного кода и наблюдение во время выполнения вместе подтверждают утверждение о пути конверсии; ни один из них не превращает всю среду браузера в автономную песочницу.
Откуда берутся ограничения: ограничения на память и холст заменяют ограничения на загрузку, поэтому потолок – это ваше устройство.
Локальная обработка заменяет ограничение на загрузку ограничениями, связанными с проверкой ввода, декодированными пикселями, распределением холста и доступной памятью устройства. Каждый входной файл ограничен выделенной панелью значением 40 MB. Запланированная выходная геометрия соответствует бюджету пикселей устройства, и пользователь получает предупреждение с указанием уменьшенных размеров, когда охранник меняет запрос.
В конфигурации нет фиксированного количества пакетов. Двадцать небольших изображений и двадцать фотографий высокого разрешения — это не эквивалентные распределения. Телефон может выйти из строя раньше, чем настольный компьютер. Правдивый оперативный совет — обрабатывать меньше файлов или файлов меньшего размера после тайм-аута или сбоя памяти, а не публиковать неподдерживаемое максимальное количество или потолок мегапикселей.
Вывод: тяжелая работа, тихий интерфейс — как Image Converter & Compressor выполняет преобразования вне основного потока на вашем устройстве.
Интерфейс остается тише, поскольку повторяющийся конвейер работает в рабочем потоке, его холст может находиться за кадром, а большие байтовые буферы перемещаются как передаваемые. Это конкретные свойства источника, а не маркетинговое сокращение. Они объясняют, где происходит работа и как возвращается прогресс, не утверждая, что каждый браузер планирует ее одинаково.
Протестируйте архитектуру с помощью изображений, которые фактически используются в вашем рабочем процессе. Наблюдайте за элементами управления во время преобразования, проверяйте ход выполнения каждого файла, проверяйте сбои и проверяйте панель «Сеть» на наличие тестового маркера. Дизайн ToolAcre дает вам наблюдаемые доказательства: настоящий рабочий модуль, измеренные выходные данные и байты локальной загрузки, а не непрозрачное удаленное задание.