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

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

Transcript

1. Загрузка и инициализация
   JavaScript приложения
   Михаил Давыдов
   @azproduction
   JavaScript и Node.js разработчик
   Dump-IT, Екатеринбург, 25 мая 2012
   

   View Slide

2. 2
   Мобильный веб
   

   View Slide

3. 3
   Не весь код используется
   40
   %
   

   View Slide

4. 4
   Браузерный кэш
   

   View Slide

5. 5
   Тестовый прототип, 7 Кб/с
   http://tinyurl.com/loader-test
   

   View Slide

6. <br/>
   <br/>
   6
   Последовательная загрузка и
   исполнение
   

   View Slide

7. 7
   9 Запросов
   131.5 Кб
   18 с
   DOM 17.5 c
   

   View Slide

8. <br/>
   <br/>
   8
   Параллельная загрузка и
   исполнение
   

   View Slide

9. 9
   9 Запросов
   131.5 Кб
   18 с
   DOM 1.5 c
   

   View Slide

10. $LAB
    .script('main.js')
    .wait()
    .script('module.js');
    10
    Параллельная загрузка,
    последовательный запуск
    http://labjs.com/
    

    View Slide

11. 11
    10 Запросов
    136.9 Кб
    18.2 с
    DOM 3.7 c
    ↑0.2
    ↑5.4
    ↑1
    

    View Slide

12. $ cat **/*.js > main.js
    $ java -jar yuicompressor.jar \
    main.js -o main.min.js
    12
    Собираем и пакуем
    http://tinyurl.com/yui-compressor
    

    View Slide

13. 13
    6 Запросов
    48 Кб
    9.5 с
    DOM 9.1 c
    ↓8.5
    ↓83.5
    ↓3
    

    View Slide

14. 14
    AppCache — оффлайн
    хранилище
    

    View Slide

15. 
    
    CACHE MANIFEST
    # v1 - 2011-08-13
    http://example.com/index.html
    http://example.com/main.js
    15
    AppCache Манифест
    

    View Slide

16. 16
    Преимущества AppCache
    1. Надежное кэширование
    2. Работа оффлайн
    3. Простое управление версиями
    4. Своевременное обновление
    http://tinyurl.com/mdn-appcache
    

    View Slide

17. 17
    Кэш — 0 запросов, 0 Кб
    

    View Slide

18. AMD — Асинхронная
    декларация модулей
    18
    Выборочная загрузка
    http://requirejs.org/
    

    View Slide

19. 19
    Преимущества АMD
    1. Грузим основные части
    2. Остальное по необходимости
    3. Автодогрузка зависимостей
    4. ...
    5. PROFIT
    

    View Slide

20. 20
    8 Запросов
    31.5
    7.4 с
    DOM 5.1 c
    +2
    +30 Кб
    +4 c ↓2.1
    ↓16.5
    ↑2
    

    View Slide

21. LMD — Ленивая
    декларация модулей
    21
    Ленивая загрузка и
    инициализация
    https://github.com/azproduction/lmd
    

    View Slide

22. 22
    Преимущества LMD
    1. Ленивая инициализация
    2. Node.js-подобные модули
    3. Встроенный сборщик и упаковщик
    4. Гибкий объем библиотеки
    5. Горячая сборка проекта
    

    View Slide

23. 23
    6 Запросов
    18
    5.1 с
    DOM 5.1 c
    +2
    +30 Кб
    +4 c ↓2.3
    ↓13.5
    ↓2
    

    View Slide

24. 9
    131.5 Кб
    18 с
    24
    6 Запросов
    18
    5.1 с
    DOM 5.1 c
    ↓12.9
    ↓113
    ↓3
    

    View Slide

25. 25
    1. Используйте AppCache
    http://tinyurl.com/mdn-appcache
    http://tinyurl.com/confessjs
    2. Соберите скрипты
    3. LMD или AMD
    +
    

    View Slide

26. 26
    +
    1. Используйте AppCache
    2. Соберите скрипты
    http://tinyurl.com/yui-compressor
    3. LMD или AMD
    

    View Slide

27. 27
    +
    1. Используйте AppCache
    2. Соберите скрипты
    3. LMD или AMD
    https://github.com/azproduction/lmd
    http://requirejs.org/
    

    View Slide

28. 28
    OVER 9000
    Achievement unlocked!
    JS
    

    View Slide

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
    

    View Slide

30. Михаил Давыдов
    JavaScript и Node.js разработчик
    azproduction@yandex-team.ru
    Twitter @azproduction
    Habr http://azproduction.habrahabr.ru
    GitHub https://github.com/azproduction
    30
    

    View Slide