Оптимизация памяти с помощью HTML5 Canvas при использовании отзывчивых картинок
Отзывчивые изображения повсеместно используются при разработке веб — приложений и страниц. Очень часто они имеют больший размер, чем нужно для текущего разрешения экрана.
Например у вас универсальное приложение которое работает на настольных компьютерах и телефонах.
Проблема в том что телефон грузит ту же картинку что и настольный компьютер тратя на это огромное количество памяти.
Решение
Самым очевидным решением было бы создание нескольких вариантов картинок и CSS, однако это потребует от вас дополнительной работы над каждой картинкой, а так же увеличение размера приложения. К тому же это абсолютно невозможно если картинки приходят от некоего удаленного API и вам неподвластны. CanvasImage оптимизирует на лету, освобождая память от больших, бесполезных изображений.
Как это работает?
- Вы вызываете
CanvasImage.all()
- Библиотека находит все изображения на странице
- Заменяет их тегами canvas того же размера
- Рисует изображения на канвасах отбрасывая данные не актуальные для текущего размера
- Удаляет большие изображения из памяти
Диаграмма использования памяти
