View
270
Download
1
Category
Preview:
Citation preview
Я.Субботник, Москва, 3 июля 2010 года
Руководитель группы разработкипользовательских интерфейсов
Азат Разетдинов
Оптимизация времени загрузки на примере Яндекс.Карт
2
Оптимизация времени загрузки
3
Зачем?
4
Влияние времени загрузки
Источник: http://stevesouders.com/docs/fronteers-20091105.pptx
— Bing: +2 сек — доходы ▼ 4,3%
— Google: +0,4 сек — поиск ▼ 0,6%
— Yahoo: +0,4 сек — трафик ▼ 5-9%
5
Методы оптимизации
— уменьшение количества запросов;
— кэширование ресурсов;
— gzip-сжатие ресурсов;
— оптимизация изображений;
— минификация стилей и скриптов;
— много других методов.
6
Инструменты
Firebug YSlow
Page Speed
7
Книги по оптимизации
8
Оптимизация Яндекс.Карт
9
10
Скрипты в конец body
11
Было
<head>
...
<script href="_api.js"/>
<script href="_jquery.js"/>
<script href="_common.js"/>
<script href="_maps.js"/>
</head>
<body>
...
<script>Maps.init()</script>
</body>
12
• Здесь может быть ваш текст
Обычный текстTemplate
13
Стало
<head>
...
<script href="_api.js"/>
</head>
<body>
...
<script>initMap()</script>
<script href="_jquery.js"/>
<script href="_common.js"/>
<script href="_maps.js"/>
<script>Maps.init()</script>
</body>
14
• Здесь может быть ваш текст
Обычный текстTemplate
15
Результат
Время до загрузки последнего тайла карты:
— Internet Explorer 6: ▼ 41%
— Internet Explorer 7: ▼ 30%
— Internet Explorer 8: ▼ 36%
16
Асинхронная загрузка скриптов
17
Асинхронная загрузка скриптов
18
Было начало рендеринга ↓
19
Стало ↓ начало рендеринга
20
Наглядное сравнение
Было:
Стало:
21
Наглядное сравнение
Было:
Стало:
22
Наглядное сравнение
Было:
Стало:
23
Наглядное сравнение
Было:
Стало:
24
Наглядное сравнение
Было:
Стало:
25
Наглядное сравнение
Было:
Стало:
26
Наглядное сравнение
Было:
Стало:
27
Определение загрузки скрипта
// в Опере 9.6 глючная поддержка readyState
if (script.onreadystatechange === null) { // IE
script.onreadystatechange = function () {
var rs = this.readyState;
if (rs === 'loaded' || rs === 'complete') {
script.onreadystatechange = null;
callback();
}
};
} else {
// readyState не гарантирует успешность загрузки
script.onload = script.onerror = callback;
}
28
Уменьшение количества запросов
29
Бинокль в Яндекс.Панорамах
30
Было
31
Стало
Safari, Chrome, Firefox, Opera:
+ transform: rotate =
32
Проверка доступности transform
typeof style.WebkitTransform === 'string'
typeof style.MozTransform === 'string'
typeof style.OTransform === 'object' // LOL WUT?
typeof style.WebkitTransform !== 'undefined'
typeof style.MozTransform !== 'undefined'
typeof style.OTransform !== 'undefined'
typeof style.transform !== 'undefined'
Правильно:
33
Скорость загрузки — ещё одно конкурентное преимущество.
Руководитель группы
119021, Россия, Москва,
ул. Льва Толстого, 16
+7 495 739-00-00
+7 495 739-70-70 — факс
azat@yandex-team.ru
Азат Разетдинов
Recommended