1. Как мы заставилиAPI Яндекс.Картработать быстрееСтепанова МаринаРазработчик интерфейсовЯ.Субботник, Санкт-Петербург, 1 декабря 2012 года 2. Что такое API Яндекс.Карт?2 3. Что такое API Яндекс.Карт?3 4. Что такое API Яндекс.Карт?4 5. Что такое API Яндекс.Карт?5 6. Слишком много вариантовиспользования API – чтоизмерять и ускорять?6 7. Опираемся на популярные кейсы Создание картыСхема проезда 1000 простых меток 1000 меток с текстом7 8. Опираемся на популярные кейсы 5000 меток черезЛиния на 10 000 точеккластеризатор…1000 линий по 10 точек8 9. Как оцениваем?– Смотрим на свою скорость– Сравниваем с конкурентами9 10. Инструменты10 11. Инструменты для измерения скорости веб-страницыМножество встроенных инструментов в браузерах (Firebug, Speed Tracer и другие) + Внутренние инструменты11 12. Интерфейс запуска тестов12 13. Профилирование конкретного теста13 14. Инструмент «Шуттилка» Внутренний инструмент Яндекса Принцип работы – отслеживание визуальных изменений на странице14 15. Инструмент «Шуттилка» Начало отрисовки Заливка фоном 1060мс1170мс Первый тайлПоследний тайл 1600мс 1660мс15 16. Инструмент «Шуттилка»16 17. Этапы жизни приложенияЗагрузка Создание окружения Взаимодействие17 18. Этапы жизни приложенияЗагрузка Создание окружения Взаимодействие18 19. Проблемы API 1.1 − Большой объем загружаемых данныхиз-за монолитного ядраJavascript ядро + CSS + Images ≈ 220 Kb* 19 * gzip + obfuscation 20. Проблемы API 1.1 − Большой объем загружаемых данныхиз-за монолитного ядра − Большое количество сетевых запросов 20 21. 21 22. 21 служебный запрос из 3422 23. Решение проблем в API 2.0 − Большой объем загружаемых данныхиз-за монолитного ядра Модульность23 24. Модульность − Разбиваем код на логические части − Позволяем подключить только то, что нужно 24 25. Модульная система js:A js:B js:E js:C js:D25 26. Модульная система js:A js:B css:A js:E js:C js:D css:B26 27. Модульная система js:A js:B css:A js:E js:C js:D css:B27 28. Модульная система js:Ajs:Bcss:A js:E js:Cjs:Dcss:B Модулей > 70028 29. Модульная система? ?? js:Ajs:Bcss:A js:E js:Cjs:Dcss:B Модулей > 70029 30. Модульная система package:A js:A js:B css:A js:E package:B js:C js:D css:B Модулей > 70030 31. Модульная система package:C package:A js:A js:B css:A js:E package:B js:C js:D css:B Модулей > 70031 32. Решение проблем в API 2.0 − Большой объем загружаемых данныхиз-за монолитного ядра − Большое количество сетевых запросов Объединение запросов32 33. Объединение запросов − Объединение загрузки JavaScript − CSS пакуем в JavaScript − Изображения пакуем в CSS, используяdataUri33 34. Порядок загрузки http://api-maps.yandex.ru/2.0Имена и зависимости Код js:Ajs:B css:Ajs:E js:Cjs:D css:B34 35. Порядок загрузкиapi-maps.yandex.ru/2.0/?lang=ru-RU http://api-maps.yandex.ru/2.035 36. Порядок загрузкиapi-maps.yandex.ru/2.0/?lang=ru-RU http://api-maps.yandex.ru/2.0Загрузчик +36 37. Порядок загрузки2.0/?lang=ru-RU&load=package.A/combine.xml?modules=... http://api-maps.yandex.ru/2.037 38. Порядок загрузки2.0/?lang=ru-RU&load=package.A/combine.xml?modules=... http://api-maps.yandex.ru/2.038 39. Результат − Загружаем только то, что нужноUsecase Объем кода Отобразить карту 96Kb Все возможности 295Kb39 40. Результат − Загружаем только то, что нужно − За минимальное количество запросов40 41. Результат − Загружаем только то, что нужно − За минимальное количество запросов 5 служебных запросов из 2241 42. Этапы жизни приложенияЗагрузка Создание окружения Взаимодействие42 43. Пара историй про создание окружения43 44. проблеме организации данных и алгоритмов на примере менеджера событий API 2.044 45. Менеджер событий API 1.1 Организация данных [observer0, observer1, observer2, ...] Использование var observer = Events.observe(obj, click, cb, ctx); Events.notify(obj, click); observer.cleanup();45 46. Менеджер событий API 1.1 Недостатки − Неудобный синтаксис − Медленное удаление слушателей46 47. Менеджер событий API 2.0 Организация данных Использование obj.events.add(click, callback, ctx).fire(click).remove(click, callback, ctx);47 48. Менеджер событий API 2.0 Добавление УдалениеAPI 1.1API 1.148 49. Эгей, значит будем использовать списки!49 50. 50 51. Слишком медленно добавляются слушатели в список L − Генерация строковых ID ─ дорого − Настройка связей между элементамидвусвязного списка ─ дорогоМы хотели оптимизировать удаление,а это оказалось не критично51 52. Возвращаемся к массивам Организация данных [callback0, context0, callback1, context1,...] Сохраняем обработчики и контексты исполнения в общем плоском массиве52 53. Массивы быстрее на добавление и удаление, если слушателей < 100053 54. Получили очень хорошие результаты − Добавление слушателей ускорилось в десяткираз − Создание геообъектов ускорилось в 2 раза54 55. Делаем выводы − Проверяем эффективность алгоритмовв реальных условиях − Избегаем преждевременныхоптимизаций55 56. Делаем выводы − Проверяем эффективность алгоритмовв реальных условиях − Избегаем преждевременныхоптимизаций56 57. взаимодействии с DOM на примере util.nodeSize57 58. util.nodeSize Предназначен для определения оптимальных размеров DOM элементов с содержимым58 59. util.nodeSize DOM-элементutil.nodeSizeРазмерыПараметры computeSize()59 60. util.nodeSize Вызов util.nodeSize влечет за собой reflow Reflow – процесс рекурсивного обхода ветви дерева DOM, вычисляющий геометрию элементов и их положение относительно родителя.60 61. Speed Tracer (by Google)Диаграммамедлительности61 62. Добавление 1000 меток с содержимым62 63. Используем requestAnimationFrame API для оптимизации количества reflow63 64. util.nodeSize стал асинхроннымcallback Размеры DOM-элемент util.nodeSizeПараметрыcomputeSize()64 65. Действия с DOM накапливаются и выполняются разом65 66. Делаем выводы Используем возможности браузеров для оптимизации работы с DOM66 67. Этапы жизни приложенияЗагрузка Создание окружения Взаимодействие67 68. Основные проблемы − Блокировки браузера из-запродолжительных действий − Большое количество DOM-элементов68 69. Как решаем проблемы блокировок СпособПример из API Чанкинг – выполняем Добавление на карту меток операции пачками через таймаут Фильтрация потока Обрабатываем не все событий mousemove69 70. Диаграммы синхронного и асинхронного добавления меток Синхронное Асинхронное70 71. Как решаем проблемы большого количества DOM-элементов СпособПример применения в API Уменьшить число Технология хотспотов, canvas элементов71 72. Контейнеры карты72 73. Принцип работы canvas и хотспотовКонтейнер событий, реализующий интерактивность с помощью активных областейevent pane Контейнер графики graphics pane73 74. Как решаем проблемы большого количества DOM-элементов СпособПример применения в API Уменьшить число Технология хотспотов, canvas элементов ОптимизироватьИспользуем css transform и css анимациюtransition где это возможно74 75. Поддержка технологий в браузерах Браузер/ПозиционированиеАнимация платформа Safari, iOS, Bada,transform3d + transform3d Chrome transition transform3d + Firefox top/lefttransition transform2d + Opera, Androidtransform2dtransition IE9 transform2dПошаговая IE6-8 top/left Пошаговая75 76. Итоговые рекомендации − Избегайте преждевременныхоптимизаций − Регулярно отслеживайте показателискорости работы − Уделяйте внимание конкретнымслучаям − Используйте возможности современныхбраузеров76 77. Полезные ссылки APIapi.yandex.ru/mapsymapsapi.ya.rufacebook.com/ymapsapi77 78. Марина СтепановаРазработчик интерфейсов@
[email protected]@yandex.ru