Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33

396 visualizaciones

Publicado el

На протяжении веков люди брали и загружали картинки. Оказывается, они делали это не правильно — максимум LazyLoad. И без промисов.

Publicado en: Internet
  • Inicia sesión para ver los comentarios

Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33

  1. 1. 1
  2. 2. Promise me an Image… Антон Корзунов, MoscowJS #33, 2016 2
  3. 3. 3 An Image…
  4. 4. Что мы знаем о картинках? На них котики! Все любят котиков. И картинки. Люди - визуалы! Больше котиков - лучше! 4
  5. 5. 5 We need moooarr!!
  6. 6. Но за все надо платить Img - один из самых тяжелых элементом страницы. Много больших, много маленьких. Fullscreen «Retina-ready» Image – 5-20mb. 6
  7. 7. В общем самый жир… Скорость соединения - невелика. Потребность в картинках - велика. Сиюминутный аппетит - ограничен. 7
  8. 8. 8 Картинки НЕ НУЖНЫ!
  9. 9. Картинки не нужны, Когда мы их не видим! Или когда мы их еще не видим… 9
  10. 10. 10 Lazy Load
  11. 11. jQuery.lazyLoad early 2010… 11 <img src=‘image1.jpg’> jQuery(‘img’).lazyLoad(); <img data-lazy-src=‘image1.jpg’> jQuery(‘img’).lazyLoad();
  12. 12. 12JoyReactor.cc 187 requests. Pending…
  13. 13. Profit? Экономия канала и трафика. Более плавная загрузка как клиента, так и сервера. 13
  14. 14. Problems? Нельзя прервать загрузку изображения. Не загружает «ненужное». PS: кому ненужное? 14
  15. 15. 15 Лень загружать…
  16. 16. А что если решения нет? Без lazyLoad всего много, долго и глупо. С lazyLoad никакого префетча, опережающей загрузки. 16
  17. 17. 17 Meanwhile in Russia…
  18. 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. Яндекс.Карты Карты - это очень много маленьких по размеру (но не по обьему) картинок. 19
  20. 20. 20И торт! Карта - она как пирог
  21. 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. 22 Важно знать, что картинки нет
  23. 23. util.imageLoader Явно сообщает о проблемах загрузки 23 /**
 * @param {String} url Image to load
 * @param {Function} callback
 **/
 imageLoader.load(url, function (image, state ) {
 });
  24. 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. 25 Не все тайлы одинаково полезны
  26. 26. Speed Limits! Количество одновременных запросов. Таймауты. Допустимые временные кванты. Скорость обработки очереди. 26
  27. 27. 27 Метки? Они тоже картинки!
  28. 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. 29 Картинки бывают разными
  30. 30. Measure twice.. DataURI - не самый быстрый, и не самый компактный. SVG - компактный, но ваще не быстрый. Canvas - удобный, но мало применимый. BlobURL - клевый, но неудобный! 30
  31. 31. 31 SVG -> PNG
  32. 32. SVG — 10-30 FPS PNG — 40-60 32 SVG хороший. Но у нас много точек.
  33. 33. 33 ShapeRendering: optimizeSpeed. +0.0%
  34. 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. 35
  36. 36. util.imageLoader.proxy Перехватить и обработать! Только зачем? 36 imageLoader.proxy.add({
 matchUrl: function (someUrl) {
 },
 /**
 * @param {String} url
 * @return {Promise}
 */
 load: function (url) {
 }
 });
  37. 37. 37 return a Promise/A+
  38. 38. Зачем мы туда полезли? Важно понимать, что мы добавили proxy исключительно потому, что: МОЖЕМ А можем, потому что imageLoader. 38
  39. 39. HeatMap Удобный инструмент. Который молча страдает. От нашего API. 39
  40. 40. Проблемы первого мира… HeatMap — процедурно- генерируемые тайлы. Отдают dataURI вместо URL Синхронно и одновременно. 40
  41. 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. 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. 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. 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. 45. Measure twice.. В настоящий момент асинхронные и «нетормозящие» кешируемые Heatmaps работают как-то… 45
  46. 46. 46 НЕ СЕКСИ :P
  47. 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. 48. 48https://github.com/yandex/mapsapi-ios | И никаких ServiceWorkers Offline cache!
  49. 49. util.imageLoader.load(function) 49 /**
 * @param {String|Object|Function} coordinates
 * @return {Promise}
 **/
 imageLoader.load(function() {
 return madeSomeAsyncMagics(); // return a Promise
 });
  50. 50. non-ES6 Promises? — 14?! Это нелепо! Нам нужно разработать один универсальный стандарт, чтобы все им пользовались. — Да, точно! 50
  51. 51. promise.(progress|notify|tick)() Был такой метод. Да всплыл. 51 imageLoader .load(url) .progress(fitToBounds) .then(finish);
  52. 52. Зачем? Progressive JPEG Мобильные сети Пользовательская верстка Динамические размеры балунов. В общем, «готовность» изображения раньше времени. 52
  53. 53. Остановите Землю! Тормозит! У нас еще есть централизованный scheduler. И world.stop, world.smooth. Остановка мира блочит все. Плавный режим - меняет лимиты imageLoader. 53
  54. 54. СТОЙ! Так что с lazyLoad? Да нормально все с ним. Только smooth, а не lazy. И да, есть нюансы. 54 Base P- P-
  55. 55. 55 Живите как кошка с собакой! Пользователь Разработчик
  56. 56. 56 ! СЕКСИ !
  57. 57. Антон Корзунов Разработчик интерфейсов АПИ карт. POSL Контакты @twitter thekasheykashey@yandex-team.ru 57

×