Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dump-IT Загрузка и инициализация JavaScript

1,400 views

Published on

Dump-IT Загрузка и инициализация JavaScript

Published in: Technology
  • Be the first to comment

Dump-IT Загрузка и инициализация JavaScript

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

×