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