Як ми збільшили чуйність програми



Майже будь-яке сучасне додаток не обходиться без завантаження картинок з мережі і ми, Surfingbird, не виняток. Однак, не можна просто завантажувати картинки послідовно, тому що, якщо користувач перемотает пару екранів, йому доведеться чекати поки завантажаться попередні зображення, які вже й не потрібні.
Тому, для збільшення чутливості програми і зниження часу очікування користувача, ми застосували кілька прийомів, про які й хочемо зараз розповісти.

Хочеться відзначити, що багато використовують ліниву завантаження картинок. Це відмінна практика, ми її любимо й поважаємо. Це економія трафіку і пам'яті на телефоні. Однак, щоб подбати про пам'яті, важливо не тільки організувати грамотне зберігання завантажених зображень, наприклад, витісняє кеш, але і оптимізувати саму завантаження.
Незважаючи на те, що в сучасному світі у користувачів давно вже безлімітний інтернет трафік і це не проблема, час очікування завантаження зображень і раніше критично. Користувачі дуже нетерплячі, вони не хочуть чекати завантаження, вони хочуть фыр-фыр-фыр і ми даємо їм цю магію.

Візьмемо випадок, коли програма — це набір картинок. Як надійде розробник, який не замислюється про чуйності програми? Він візьме всі картинки, покладе їх у чергу на завантаження і виявиться, що вони будуть завантажуватися, в середньому, одна за одною.
Подивіться, як би це могло виглядати.

Що ми бачимо? Користувачеві доводиться чекати, поки завантажаться попередні картинки.
При цьому, користувач не бачить, що взагалі відбувається. Зараз для користувача додаток гальмує, а все тому що немає ніякої можливості зрозуміти — вантажиться картинка чи ні.

Важливо, щоб у користувача було розуміння, що все добре, все вантажиться, ще трохи і з'явиться картинка. Перше, що ми зробили — це додали прогрессбар завантаження картинки. Реалізувати це просто: додаємо сабвью до нашої картинці і міняємо прогрес за колбеку:

// не треба ставиться до цього коду як до живого
// багато речей типу логіки показу/приховування progressView і тому подібні речі сховані
// код дано для того, щоб було простіше зрозуміти суть

-(void)layoutSubviews
{
CGRect rect = self.progressView.frame;
rect.size.width = self.bounds.size.width * self.progress;
self.progressView.frame = rect;
}

-(void)setProgress:(CGFloat)progress
{
_progress = progress;

if (_progress > 1)
_progress = 1;
if (_progress < 0)
_progress = 0;

[self setNeedsLayout];
}


І прописуємо операції downloadProgressBlock (для операцій, успадкованих від AFURLConnectionOperation):

[imageView.af_imageRequestOperation setDownloadProgressBlock:^(NSUInteger bytesRead, long long totalBytesRead, long long totalBytesExpectedToRead) {
weakSelf.progress = totalBytesRead/totalBytesExpectedToRead;
}];


Ось що з цього виходить.

Незважаючи на те, що очікування завантаження картинки таке ж, як і в першому випадку, в підсумку, у користувача складається відчуття, що все добре.
Але це зовсім не ідеал. Як видно з прикладу, якщо користувач перемотает зовсім далеко, то очікування завантаження картинки буде дуже довгим. Так чому б не показувати в першу чергу те, що на екрані саме зараз?

Для завантаження кожної картинки ми використовуємо NSOperation. Як тільки ми отримуємо чергову порцію контенту, ми створюємо операцію завантаження для кожної картинки і поміщаємо її у чергу з середнім пріоритетом. Як тільки картинка опиняється в полі зору, ми встановлюємо операції на її завантаження високий пріоритет, і саме ця картинка вантажиться раніше тих, які нам зараз не потрібні.

Є ще одна тонкість — найімовірніше, що ті картинки, які користувач проскроллил, йому менш потрібні, ніж ті, що внизу. Тому, як тільки картинка зникає з екрана, ми встановлюємо операції на її завантаження ще менший пріоритет, ніж пріоритет операцій на предзагрузку.

- (void) willAppear
{
[self.af_imageRequestOperation setQueuePriority:NSOperationQueuePriorityVeryHigh];
}

- (void) willDisappear
{
[self.af_imageRequestOperation setQueuePriority:NSOperationQueuePriorityVeryLow];
}





В результаті, нам вдалося збільшити чуйність програми і знизити час очікування користувача. Візуально програма стала працювати швидше.
Якщо ви вважаєте, що подібні трюки не працюють, радимо почитати це дослідження фейсбуку.

А ви застосовуєте щось подібне? Буде приємно обговорити в коментарях.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.