Загрузка и Инициализация JavaScript

Video https://www.youtube.com/watch?v=ra5J9R2WH5I

Transcript

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