Optimizaciya vremeni zagruzki_azat_razetdinov
-
Upload
yaevents -
Category
Technology
-
view
270 -
download
1
Transcript of Optimizaciya vremeni zagruzki_azat_razetdinov
![Page 1: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/1.jpg)
Я.Субботник, Москва, 3 июля 2010 года
Руководитель группы разработкипользовательских интерфейсов
Азат Разетдинов
Оптимизация времени загрузки на примере Яндекс.Карт
![Page 2: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/2.jpg)
2
Оптимизация времени загрузки
![Page 3: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/3.jpg)
3
Зачем?
![Page 4: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/4.jpg)
4
Влияние времени загрузки
Источник: http://stevesouders.com/docs/fronteers-20091105.pptx
— Bing: +2 сек — доходы ▼ 4,3%
— Google: +0,4 сек — поиск ▼ 0,6%
— Yahoo: +0,4 сек — трафик ▼ 5-9%
![Page 5: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/5.jpg)
5
Методы оптимизации
— уменьшение количества запросов;
— кэширование ресурсов;
— gzip-сжатие ресурсов;
— оптимизация изображений;
— минификация стилей и скриптов;
— много других методов.
![Page 6: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/6.jpg)
6
Инструменты
Firebug YSlow
Page Speed
![Page 7: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/7.jpg)
7
Книги по оптимизации
![Page 8: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/8.jpg)
8
Оптимизация Яндекс.Карт
![Page 9: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/9.jpg)
9
![Page 10: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/10.jpg)
10
Скрипты в конец body
![Page 11: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/11.jpg)
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>
![Page 12: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/12.jpg)
12
• Здесь может быть ваш текст
Обычный текстTemplate
![Page 13: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/13.jpg)
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>
![Page 14: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/14.jpg)
14
• Здесь может быть ваш текст
Обычный текстTemplate
![Page 15: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/15.jpg)
15
Результат
Время до загрузки последнего тайла карты:
— Internet Explorer 6: ▼ 41%
— Internet Explorer 7: ▼ 30%
— Internet Explorer 8: ▼ 36%
![Page 16: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/16.jpg)
16
Асинхронная загрузка скриптов
![Page 17: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/17.jpg)
17
Асинхронная загрузка скриптов
![Page 18: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/18.jpg)
18
Было начало рендеринга ↓
![Page 19: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/19.jpg)
19
Стало ↓ начало рендеринга
![Page 20: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/20.jpg)
20
Наглядное сравнение
Было:
Стало:
![Page 21: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/21.jpg)
21
Наглядное сравнение
Было:
Стало:
![Page 22: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/22.jpg)
22
Наглядное сравнение
Было:
Стало:
![Page 23: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/23.jpg)
23
Наглядное сравнение
Было:
Стало:
![Page 24: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/24.jpg)
24
Наглядное сравнение
Было:
Стало:
![Page 25: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/25.jpg)
25
Наглядное сравнение
Было:
Стало:
![Page 26: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/26.jpg)
26
Наглядное сравнение
Было:
Стало:
![Page 27: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/27.jpg)
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;
}
![Page 28: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/28.jpg)
28
Уменьшение количества запросов
![Page 29: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/29.jpg)
29
Бинокль в Яндекс.Панорамах
![Page 30: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/30.jpg)
30
Было
![Page 31: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/31.jpg)
31
Стало
Safari, Chrome, Firefox, Opera:
+ transform: rotate =
![Page 32: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/32.jpg)
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'
Правильно:
![Page 33: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/33.jpg)
33
Скорость загрузки — ещё одно конкурентное преимущество.
![Page 34: Optimizaciya vremeni zagruzki_azat_razetdinov](https://reader036.fdocument.pub/reader036/viewer/2022081401/557fb4a2d8b42a40118b4718/html5/thumbnails/34.jpg)
Руководитель группы
119021, Россия, Москва,
ул. Льва Толстого, 16
+7 495 739-00-00
+7 495 739-70-70 — факс
Азат Разетдинов