x
 
Иван Самодян
29 июня 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


В книгах бюро много иллюстраций: в «Типографике и вёрстке» их 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. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Boris Rozenshteyn
29 июня 2017

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

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

Дмитрий Рыбин
3 июля 2017

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Расскажите об обязанностях технического директора в бюро Как попросить клиента помочь с дебагом? 1 Как бороться с багами? Часть восьмая: порефлексировать Как бороться с багами? Часть седьмая: исправить




Недавно всплыло

Можно ли достичь эффекта переливания без встраивания видео на сайт? 1 1 На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 6