Открыть список
Как стать автором
Обновить

Прозрачное кеширование изображений во Flash/Flex

Чулан
Вкратце — эта техника ускоряет показ множества одинаковых изображений (с одинаковым url), избавляет от повторных загрузок и экономит память. Решения из google-поиска не впечатлили, т.к. там предлагаются только самые базовые варианты без учёта частностей, к тому же их внедрение в проект не тривиально.
В данном решении достаточна замена Image на ImageCached для достижения эффекта. В конце поста ссылка на тестовое приложение, наглядно показывающее преимущество кеширования.

С чего всё начиналось:
В текущем проекте очень много работы с графикой, и столкнулся со следующей проблемой — каждый экземпляр класса Image с одинаковым URL создаёт под себя загрузчик и грузит себя (пусть даже и из кеша). Особенно хорошо это заметно при организации drag'n'drop'а картинок, когда при перетаскивании создаётся proxy картинки, картинка подгружается не сразу, и в результате заметно моргание.
Собств-но с этого полусекундного моргания и родился этот пост.

Кеш изображений, описанный в большинстве примеров, основан на том, что свойству source класса Image может быть присвоен как URL адрес, так и объект класса Bitmap (в общем случае реализатор интерфейса IDisplayObject).

Идея проста — в случае, если изображение с таким source уже было загружено — подставлять вместо URL bitmap загруженного изображения.
вариант 1:
— если в кеше нет изображения с таким url, то начать его загрузку
— иначе взять из кеша загруженный Bitmap и установить его как source
при завершении загрузки:
— установить загруженный bitmap как source
— поместить загруженный bitmap в кеш
Этот вариант вообщем был достаточен для проекта, но есть у него частность, которая при текущих мощностях сомнительна, но «не красива».
Дело в том, что при асинхроннной загрузке, 20 одновременно выводимых картинок с одинаковым (и незакешированным) URL приведут в 1ом варианте к 20 созданиям загрузчика. Посему был создан

вариант 2:
— если в кеше нет записи с таким URL, то создать её, поставить объект в очередь ожидания и начать загрузку
— если в кеше есть запись с таким URL и есть данные, то установить их как source
— если в кеше есть запись с таким URL и нет даных, поставить объект в очередь ожидания
загрузчик варианта2:
— поместить загруженный bitmap в кеш
— пройтись по ожидающим объектам, установить им загруженный bitmap как source и удалить из списка ожидания

Этот вариант корректно обрабатывает одновременную загрузку одного URL несколькими объектами, однако и у него есть частность.
Пример — форма со списком элементов и окно, в котором показывается картинка текущего элемента. При быстром проходе по списку, source у картинки может меняться быстрее чем сможет загрузиться предыдущее изображение что приводит к разсинхронизации кеша.
Решение собств-но в одну строчку
вариант3:
— если объект есть в очереди ожидания, то удалить его из очереди (загрузчик всё равно поместит в кеш предыдущую картинку, но source не будет обновлён устаревшими данными)
… далее как в варианте2…
В результате все изображения будут кешироваться, но как source установится только последнее.

Реализация:
Класс ImageCached расширяющий класс Image, с переопределением setter'а для свойства source (код ниже)

Итог:
В проекте класс Image find-and-replace'ом заменён на ImageCached и о нём забыто.
По коду сразу скажу — это мой первый проект на flash/as3/flex, аналога std:map для кеша не нашёл, буду рад критике.

Тестовое приложение — click

Создаёт два изображения, сразу после этого обменивает им source друг на друга, при движении мышки создаёт под курсором Image/ImageCached со временем жизни в 2 секунды.
Переключение между Image и ImageCached — по клику (также вызывается garbage collector)
Выводится график потребления памяти (компонент нагуглен)

Собств-но хорошо видно как скачет память и общее быстродействие при использовании Image и положительный эффект от ImageCached.

Исходники — click, ну или можно в приложении правый клик -> View Source
Теги:flashflexactionscriptcache
Хабы: Чулан
Всего голосов 5: ↑4 и ↓1 +3
Просмотры221

Похожие публикации

Frontend-разработчик с нуля
11 мая 202177 940 ₽Нетология
PR-менеджер
11 мая 202163 900 ₽Нетология
Специализация Data Science
12 мая 2021114 000 ₽SkillFactory
SMM-менеджер
13 мая 2021Цена по запросуGeekBrains

Лучшие публикации за сутки