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

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

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

Загрузка и Инициализация 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
Back To Text UI
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
3
190
Promise – это не больно
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
140
Components Now!
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
3
89
ШРИ - JavaScript Event Model
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
150
ШРИ - Code Style
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
70
HTML5 Camp - JavaScript на фронте и в тылу
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
160
Code Fest - Работает? Стабильно? Эффективно?
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
74
UWDC - Модули и сборка JavaScript
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
92
Шаблонизация
B827d6cfdfbcfce33700b0e6cc03e344?s=48 azproduction
0
76

Other Decks in Programming

See All in Programming
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
341ac9f717b3904d6674784c0fcd9cf2?s=48 owaspkansai
0
290
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
Bbf28bf908ac83e5b85b52a675641641?s=48 fixstars
0
120
Pythonによる開発をアップデートするライブラリの紹介
4b46b5f1acab7f5a64c0036c1fc39f31?s=48 daikikatsuragawa
1
340
設計の考え方とやり方
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
48
26k
アジャイルで始める データ分析基盤構築
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
1
860
Regular expressions basics/正規表現の基本
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
6
260
クックパッドマートの失敗したデータ設計 Before / After 大放出
0be62f7ac4cc32f37f02a98aaeb86f5f?s=48 mokuzon
20
25k
Edge Side Frontend という新領域
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
22
10k
パスワードに関する最近の動向
8fd1ae6548d5ab14139c8d8032b76ee1?s=48 kenchan0130
1
320
NestJS_meetup_atamaplus
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
210
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
130
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k

Featured

See All Featured
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
11k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
26k
Typedesign – Prime Four
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
34
1.4k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.7k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k
Code Reviewing Like a Champion
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
506
37k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k

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