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