Школа
Веб-разработка

Вы говорили, что картинки в книге выгружаются из памяти, чтобы повысить производительность. Как это устроено?

Василий и Руст! В одном из советов вы говорили, что картинки в книге выгружаются из памяти, чтобы повысить производительность. Как это устроено? Как выгружаете?

Иван Самодян
29 июня 2017
👁 5132   🗩2
Веб-разработка

Вы говорили, что картинки в книге выгружаются из памяти, чтобы повысить производительность. Как это устроено?

Василий и Руст! В одном из советов вы говорили, что картинки в книге выгружаются из памяти, чтобы повысить производительность. Как это устроено? Как выгружаете?

Иван Самодян
29 июня 2017
👁 5132   🗩2
Василий Половнёв
Технический директор бюро
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Подробнее о загрузке изображений в книгах читайте в Техноведре

В книгах бюро много иллюстраций: в «Типографике и вёрстке» их 660, в «Пользовательском интерфейсе» — уже 524. Чтобы читатель не ждал, пока картинки загрузятся, книжный движок заранее скачивает нужные картинки.

Подробнее о загрузке изображений в книгах читайте в Техноведре

Чтобы браузер не тормозил из‑за такого количества изображений, книжный движок выгружает из памяти уже не используемые картинки. Для этого движок ведёт историю чтения и выгружает изображения из «старых» разворотов так, чтобы загруженные изображения остались на X последних разворотов.

На мобильных устройствах и неретиновых десктопах для выгрузки изображений из памяти, мы заменяем их на прозрачный однопиксельный гиф:

const BLANK_GIF = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';

$('.image.is__ready.can__unload').each(function() {
  $(this)
    .css('background-image', BLANK_GIF)
    .removeClass('is__ready can__unload');
});
На Айпаде не освобождали память ни display: none, ни background‑image: none

Ретиновые десктопы считаем достаточно мощными устройствами, чтобы не выгружать изображения целиком. Поэтому на них меняем ретиновое изображение на его неретиновую версию: памяти меньше, а при случайном переходе к развороту читатель увидит неретину, а не пустой экран.

Чтобы отслеживать потребление памяти в Айпаде или Айфоне, советую XCode Instruments (Activity Monitor). На десктопе — Chrome Task Manager (More Tools — Task Manager) и Heap Snapshot (Developer Tools — Memory).

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

В jQuery не нужно использовать .each(), потому что .css() и .removeClass() применяются ко всем найденным элементам. Пример можно упростить и сократить:

$(‘.image.is__ready.can__unload’)
  .css(‘background‑image’, BLANK_GIF)
  .removeClass(‘is__ready can__unload’);

Как следующий шаг было бы классно выгружать все развороты, которые сейчас вне области видимости.

Дабы исключить мерцания при скролле, можно дополнительно подгружать по N разворотов перед и после текущего.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы