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.isready.canunload’)
  .css(‘background-image’, BLANK_GIF)
  .removeClass(‘isready canunload’);

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

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

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


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

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

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

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

Как следить за качеством кода? Часть третья: процессы 2 Принципы надёжной вёрстки 3 Автотесты «на пальцах» Как следить за качеством кода? Часть вторая: метрики




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

В бюро есть таймтрекинг для сотрудников? 5 2 Хочу научиться сторителлингу 2 2