TGViewer
For Web — фронтенд, дизайн, программирование For Web — фронтенд, дизайн, программирование @forwebdev · 13K subscribers
Post #4169 6.95K
For Web — фронтенд, дизайн, программирование URL.createObjectURL вместо FileReader.readAsDataURL Если вам нужно отобразить картинку, которая изначально представлена в виде файла или блоба, не используйте для этого асинхронный FileReader.readAsDataURL. Лучше применить синхронный URL.createObjectURL —…
У нескольких человек возник резонный вопрос: чем конкретно URL.createObjectURL лучше FileReader.readAsDataURL, не заблокирует ли синхронный URL.createObjectURL поток, если передать ему жирные данные?

Начнём объяснение с того, чем плох FileReader.readAsDataURL: хоть он и работает асинхронно и не блокирует поток, он требует значительных ресурсов для чтения содержимого блоба и его конвертации в data URL.

URL.createObjectURL лучше тем, что он не требует чтения содержимого блоба, а значит расходует гораздо меньше ресурсов; он синхронный, а значит максимально простой в использовании. Генерируемый URL основан на UUID, а не на содержимом блоба, а связываются URL с блобом через специальную специальную хеш-таблицу blob URL store. Пока блоб входит в эту хеш-таблицу, сборщик мусора не может удалить его из памяти, поэтому по завершении использования URL его и нужно отзывать через URL.revokeObjectURL.

Подробно вся механика описана в спецификации.
More from @forwebdev
  1. May 12, 2025GSAP теперь бесплатен: продвинутая библиотека для анимаций и все её платные плагины теперь…
  2. May 2, 2025Относительные цвета в CSS: интерактивное руководство по новому синтаксису, позволяющему ди…
  3. Apr 25, 2025Галерея обложек на современном CSS со Scroll-Driven анимациями: Эдди Османи разбирает совр…
  4. Apr 21, 2025Rsdoctor, инструмент для продвинутого анализа процесса и результата бандлинга, совместимый…
  5. Apr 14, 2025Массовое подавление ошибок: в ESLint появился официальный механизм для постепенного включе…
  6. Apr 10, 2025За пределами NPM: выбираем зависимости с умом. Обзор сервисов для поиска и детального анал…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →