FileReader vs. window.URL.createObjectURL

Я создаю мобильный сайт, и я бы хотел использовать Camera API для съемки фотографий. Изображения должны отображаться на веб-сайте и загружаться на сервер. В соответствии с описанием API камеры на MDN изображения можно просмотреть и отобразить на веб-сайте с помощью FileReader или window.URL.createObjectURL. Я успешно протестировал эти возможные решения с iPad (Safari и Chrome) и планшет Android (Chrome и Firefox).

В чем разница между FileReader и window.URL.createObjectURL? Я думаю, что window.URL.createObjectURL новее, но не стандарт. Есть ли разница в производительности?

Ответы

Ответ 1

Есть разница.

1) время

  • createObjectURL выполняется синхронно (немедленно)
  • FileReader.readAsDataURL выполняется асинхронно (через некоторое время)

2) использование памяти

  • createObjectURL возвращает url с хешем и сохраняет объект в памяти до тех пор, пока документ не выгрузит событие (например, закрыть документ) или не выполнит revokeObjectURL
  • FileReader.readAsDataURL возвращает base64, который содержит много символов, и использует больше памяти, чем blob-url, но удаляет из памяти, когда вы ее не используете (сборщиком мусора)

3) поддержка

  • createObjectURL из IE 10 и всех современных браузеров

  • FileReader.readAsDataURL из IE 10 и всех современных браузеров

    От меня лучше использовать blob-url (через createObjectURL), он эффективнее и быстрее, но если вы используете много URL-адресов объектов, вам нужно отпустите эти URL-адреса revokeObjectURL (чтобы освободить память). Например, вы можете вызвать URL.revokeObjectURL внутри обработчика загрузки изображения, а объект Image сохранит данные изображения, не теряя его, Nahuel Greco (c).