dump-it Загрузка и инициализация javascript
DESCRIPTION
Dump-IT Загрузка и инициализация JavaScriptTRANSCRIPT
Загрузка и инициализация JavaScript приложенияМихаил Давыдов @azproduction
JavaScript и Node.js разработчик
Dump-IT, Екатеринбург, 25 мая 2012
2
Мобильный веб
3
Не весь код используется
40%
4
Браузерный кэш
<script src="main.js">
</script>
<script src="module.js">
</script>
6
Последовательная загрузка и исполнение
7
9 Запросов
131.5 Кб
18 с
DOM 17.5 c
<script src="main.js" async>
</script>
<script src="module.js" async>
</script>
8
Параллельная загрузка и исполнение
9
9 Запросов
131.5 Кб
18 с
DOM 1.5 c
$LAB
.script('main.js')
.wait()
.script('module.js');
10
Параллельная загрузка, последовательный запуск
http://labjs.com/
11
10 Запросов
136.9 Кб
18.2 с
DOM 3.7 c
↑0.2
↑5.4
↑1
$ cat **/*.js > main.js
$ java -jar yuicompressor.jar \
main.js -o main.min.js
12
Собираем и пакуем
http://tinyurl.com/yui-compressor
13
6 Запросов
48 Кб
9.5 с
DOM 9.1 c
↓8.5
↓83.5
↓3
14
AppCache — оффлайн хранилище
<html manifest="example.appcache">
</html>
CACHE MANIFEST
# v1 - 2011-08-13
http://example.com/index.html
http://example.com/main.js
15
AppCache Манифест
16
Преимущества AppCache
1. Надежное кэширование
2. Работа оффлайн
3. Простое управление версиями
4. Своевременное обновление
http://tinyurl.com/mdn-appcache
17
Кэш — 0 запросов, 0 Кб
AMD — Асинхронная декларация модулей
18
Выборочная загрузка
http://requirejs.org/
19
Преимущества АMD
1. Грузим основные части
2. Остальное по необходимости
3. Автодогрузка зависимостей
4. ...
5. PROFIT
20
8 Запросов
31.5
7.4 с
DOM 5.1 c
+2
+30 Кб
+4 c ↓2.1
↓16.5
↑2
LMD — Ленивая декларация модулей
21
Ленивая загрузка и инициализация
https://github.com/azproduction/lmd
22
Преимущества LMD
1. Ленивая инициализация
2. Node.js-подобные модули
3. Встроенный сборщик и упаковщик
4. Гибкий объем библиотеки
5. Горячая сборка проекта
23
6 Запросов
18
5.1 с
DOM 5.1 c
+2
+30 Кб
+4 c ↓2.3
↓13.5
↓2
9
131.5 Кб
18 с
24
6 Запросов
18
5.1 с
DOM 5.1 c
↓12.9
↓113
↓3
25
1. Используйте AppCache
http://tinyurl.com/mdn-appcachehttp://tinyurl.com/confessjs
2. Соберите скрипты3. LMD или AMD
+
26
+1. Используйте AppCache2. Соберите скрипты
http://tinyurl.com/yui-compressor
3. LMD или AMD
27
+1. Используйте AppCache2. Соберите скрипты3. LMD или AMD
https://github.com/azproduction/lmdhttp://requirejs.org/
28
OVER 9000
Achievement unlocked!
JS
29
Вопросы?
LMDConfessRequireYUICCanIUse
https://github.com/azproduction/lmdhttp://tinyurl.com/confessjshttp://requirejs.org/http://tinyurl.com/yui-compressorhttp://caniuse.com/
Тест http://tinyurl.com/loader-test
Михаил ДавыдовJavaScript и Node.js разработчик
Twitter @azproduction
Habr http://azproduction.habrahabr.ru
GitHub https://github.com/azproduction
30