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

B827d6cfdfbcfce33700b0e6cc03e344?s=47 Mikhail Davydov
October 11, 2012
Programming
0
150

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

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

B827d6cfdfbcfce33700b0e6cc03e344?s=128

Mikhail Davydov

October 11, 2012
Tweet

More Decks by Mikhail Davydov

See All by Mikhail Davydov
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
3
130
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
130
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
3
78
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
130
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
61
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
80
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
68
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
84
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
65

Other Decks in Programming

See All in Programming
8f1fde48dea93c5c3dd6c68c8b8cee92?s=48 kazutaka333
0
260
4d78b749c315e21a956053dcbf0508a9?s=48 po3rin
1
130
20c5ddcad23304aed77ce8c3aa020562?s=48 tkmru
0
110
5701f31a8433a22ae736282de8d08cd6?s=48 handstandsam
5
4k
E6143330e12cd226c3dab99f3fe8cb3e?s=48 yanaemon
1
140
822cde5b176ef140171a27f8294c2bd8?s=48 andycraig
0
560
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
2
210
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
1.1k
9af444e4e7110845f0b3319efb1ca252?s=48 920oj
1
670
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
0
160
41a66760b3483d518d9e48a7da37f91b?s=48 shibadog1121
9
1.6k
817e89f88197980860f1854b74fbee25?s=48 lcdsmao
2
340

Featured

See All Featured
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
35k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
26
850
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
91
2.8k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
68
3.4k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
40
4.3k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
6.8k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
195
9.4k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
230
750k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
51
1.8k

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