Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Загрузка и Инициализация 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
170
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
130
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
3
85
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
140
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
64
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
100
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
69
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
86
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
69

Other Decks in Programming

See All in Programming
E37b4344ef4bfd0fc4826c04971e54fb?s=48 nrslib
0
160
23a9ea59992e5349aa4bf659a6d583d3?s=48 nanashiki
1
550
05a867429c5e5a2b4fe997b91bc98c11?s=48 taketo1024
0
130
E9e3472b8801ed21298ccefeecfaf429?s=48 takamichie
PRO
0
250
1ac022a81a17900b312d8f7b03d2b4db?s=48 yuukis
0
200
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
36
12k
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
24
3.6k
583e920a7e9238a1c21e923025f8f641?s=48 elainenaomi
4
170
4651f57d479e562a45dd624cc24dbee3?s=48 nsaito9628
1
270
F6baf93a0833a98bdc8184c214f4c468?s=48 rgoswami
0
110
3f523bb4384468543d01a1d21029fc12?s=48 obregonia1
0
440
Eae7b6aeee72d3081b01d09a2d675f9a?s=48 akkeylab
5
1k

Featured

See All Featured
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
122
5.1k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.1k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
208
20k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.6k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
8.9k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
25
4.1k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
32k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.7k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
60
7.2k

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