Документ обсуждает важность оптимизации загрузки изображений в веб-разработке, подчеркивая потребность в использовании технологий, таких как lazy load, для улучшения скорости загрузки страниц. Он также освещает развитие API карт в Яндексе и рассматривает различные подходы к загрузке изображений, включая использование прокси и управление приоритетами загрузки. Автор делится рекомендациями по применению util.imageloader для эффективного управления процессом загрузки изображений.

1. 1

2. Promise me an Image…
Антон Корзунов, MoscowJS #33, 2016
2

3. 3
An Image…

4. Что мы знаем о картинках?
На них котики!
Все любят котиков. И картинки.
Люди - визуалы!
Больше котиков - лучше!
4

5. 5
We need moooarr!!

6. Но за все надо платить
Img - один из самых тяжелых
элементом страницы.
Много больших, много
маленьких.
Fullscreen «Retina-ready»
Image – 5-20mb.
6

7. В общем самый жир…
Скорость соединения -
невелика.
Потребность в картинках -
велика.
Сиюминутный аппетит -
ограничен.
7

8. 8
Картинки НЕ НУЖНЫ!

9. Картинки не нужны,
Когда мы их не видим!
Или когда мы их еще не
видим…
9

10. 10
Lazy Load

11. jQuery.lazyLoad
early 2010…
11
<img src=‘image1.jpg’>
jQuery(‘img’).lazyLoad();
<img data-lazy-src=‘image1.jpg’>
jQuery(‘img’).lazyLoad();

12. 12JoyReactor.cc
187 requests. Pending…

13. Profit?
Экономия канала и трафика.
Более плавная загрузка как
клиента, так и сервера.
13

14. Problems?
Нельзя прервать загрузку
изображения.
Не загружает «ненужное».
PS: кому ненужное?
14

15. 15
Лень загружать…

16. А что если решения нет?
Без lazyLoad всего много,
долго и глупо.
С lazyLoad никакого
префетча, опережающей
загрузки.
16

17. 17
Meanwhile in Russia…

18. Развитие API Карт
2004 год – запуск Яндекс.Карт
API 1.0 – 13 ноября 2008
API 1.1 – 25 июня 2009
API 2.0 – 19 апреля 2012
API 2.1 – 4 октября 2013
Что же можно делать столько
лет?
18

19. Яндекс.Карты
Карты - это очень много
маленьких по размеру (но не по
обьему) картинок.
19

20. 20И торт!
Карта - она как пирог

21. util.imageLoader
One ring to rule them all, one ring to find them, One ring
to bring them all and in the darkness bind them…
21
/**
* @param {String} url Image to load
* @param {Function} callback
**/
imageLoader.load(url, function (image) {
});

22. 22
Важно знать, что картинки нет

23. util.imageLoader
Явно сообщает о проблемах загрузки
23
/**
* @param {String} url Image to load
* @param {Function} callback
**/
imageLoader.load(url, function (image, state ) {
});

24. util.imageLoader
Позволяет управлять порядком загрузки. Зачем?
24
/**
* @param {String} url Адрес изображение
* @param {Integer} priority Приоритет загрузки
* @param {Function} callback
**/
imageLoader.load(url, priority , function (image, state) {
});
// priority = 1.0 / tileDist;

25. 25
Не все тайлы одинаково полезны

26. Speed Limits!
Количество одновременных
запросов.
Таймауты.
Допустимые временные
кванты.
Скорость обработки очереди.
26

27. 27
Метки? Они тоже картинки!

28. util.imageLoader
Мухи. Отдельно. Котлеты. Отдельно.
28
/**
* @param {String|Object} coordinates
* @param {Function} callback
**/
imageLoader.load({
url: url,
priority: priority,
channel : channel // tiles, placemarks, dataURI, functional
}, function (image, state) {
});

29. 29
Картинки бывают разными

30. Measure twice..
DataURI - не самый быстрый,
и не самый компактный.
SVG - компактный, но ваще
не быстрый.
Canvas - удобный, но мало
применимый.
BlobURL - клевый, но
неудобный!
30

31. 31
SVG -> PNG

32. SVG — 10-30 FPS PNG — 40-60
32
SVG хороший. Но у нас много точек.

33. 33
ShapeRendering: optimizeSpeed.
+0.0%

34. util.imageLoader
Тайлам — URL
Графике — Image
WebGL — CORS!
34
imageLoader.load({
url: url,
priority: priority,
channel: ‘tiles’,
returnAs : ‘image’, // url, bloburl, texture
, function (image, state) {
});

35. 35

36. util.imageLoader.proxy
Перехватить и обработать!
Только зачем?
36
imageLoader.proxy.add({
matchUrl: function (someUrl) {
},
/**
* @param {String} url
* @return {Promise}
*/
load: function (url) {
}
});

37. 37
return a Promise/A+

38. Зачем мы туда полезли?
Важно понимать, что мы
добавили proxy исключительно
потому, что:
МОЖЕМ
А можем, потому что
imageLoader.
38

39. HeatMap
Удобный инструмент.
Который молча страдает.
От нашего API.
39

40. Проблемы первого мира…
HeatMap — процедурно-
генерируемые тайлы.
Отдают dataURI вместо URL
Синхронно и одновременно.
40

41. util.imageLoader.proxy
41
TileUrlsGenerator.prototype.getTileUrl = function (tileNumber, zoom)
{
return `ym-heatmap://mid=${this.heatMapID}/x=${tileNumber[0]}/
y=${tileNumber[1]}/z=${zoom}`;
};
Шаг 1 – отдаем виртуальный URL.

42. util.imageLoader.proxy
42
imageLoader.proxy.add({
matchUrl: function (url) {
return url && url.indexOf('ym-heatmap') === 0 ? 1 : 0;
},
load: function (url, request) {
…
}
});
Шаг 2 – прокси забирает этот адрес себе.

43. util.imageLoader.proxy
43
load: function (url, request) {
if (mapId && lookupStorage[mapId]) {
return lookupStorage[mapId].getTileImage([+x, +y],+z)
} else {
return vow.reject();
}
}
Шаг 3 – дергает «реальную» функцию генерации тайла.

44. util.imageLoader.proxy
44
TileUrlsGenerator.prototype.getTileUrl = function (tileNumber, zoom) {
return `ym-heatmap://mid=${this.heatMapID}/x=${tileNumber[0]}/y=${tileNumber[1]}/
z=${zoom}`;
};
//……..
imageLoader.proxy.add({
matchUrl: function (url) {
return url && url.indexOf('ym-heatmap') === 0 ? 1 : 0;
},
load: function (url, request) {
//….
if (params.mid && lookupStorage[params.mid]) {
return vow
.resolve(
heatmapLookupStorage[params.mid]
.getTileImage([+params.x, +params.y], +params.z)
);
} else {
return vow.reject();
}
}

45. Measure twice..
В настоящий момент
асинхронные
и «нетормозящие»
кешируемые
Heatmaps работают как-то…
45

46. 46
НЕ СЕКСИ :P

47. util.imageLoader.proxy
47
var RE_TILE_HOST = /vecd+.maps.yandex.net//;
imageLoader.proxy.add({
matchUrl: function (url) {
return !!url.match(RE_TILE_HOST);
},
load: function (url) {
return fetchLocalUrl(url, ‘image/jpeg', getPath(url))
.fail(function () { return url; });
}

48. 48https://github.com/yandex/mapsapi-ios | И никаких ServiceWorkers
Offline cache!

49. util.imageLoader.load(function)
49
/**
* @param {String|Object|Function} coordinates
* @return {Promise}
**/
imageLoader.load(function() {
return madeSomeAsyncMagics(); // return a Promise
});

50. non-ES6 Promises?
— 14?! Это нелепо! Нам нужно
разработать один
универсальный стандарт,
чтобы все им пользовались.
— Да, точно!
50

51. promise.(progress|notify|tick)()
Был такой метод. Да всплыл.
51
imageLoader
.load(url)
.progress(fitToBounds)
.then(finish);

52. Зачем?
Progressive JPEG
Мобильные сети
Пользовательская верстка
Динамические размеры
балунов.
В общем, «готовность»
изображения раньше времени.
52

53. Остановите Землю! Тормозит!
У нас еще есть
централизованный scheduler.
И world.stop, world.smooth.
Остановка мира блочит все.
Плавный режим - меняет
лимиты imageLoader.
53

54. СТОЙ! Так что с lazyLoad?
Да нормально все с ним.
Только smooth, а не lazy.
И да, есть нюансы.
54
Base
P-
P-

55. 55
Живите как кошка с собакой!
Пользователь
Разработчик

56. 56
! СЕКСИ !

57. Антон Корзунов
Разработчик интерфейсов АПИ карт.
POSL
Контакты
@twitter
thekasheykashey@yandex-team.ru
57