Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Загрузка и Инициализация JavaScript
Search
Mikhail Davydov
October 11, 2012
Programming
0
240
Загрузка и Инициализация JavaScript
Video
https://www.youtube.com/watch?v=ra5J9R2WH5I
Mikhail Davydov
October 11, 2012
Tweet
Share
More Decks by Mikhail Davydov
See All by Mikhail Davydov
Back To Text UI
azproduction
3
270
Promise – это не больно
azproduction
0
190
Components Now!
azproduction
3
130
ШРИ - JavaScript Event Model
azproduction
0
180
ШРИ - Code Style
azproduction
0
98
HTML5 Camp - JavaScript на фронте и в тылу
azproduction
0
270
Code Fest - Работает? Стабильно? Эффективно?
azproduction
0
140
UWDC - Модули и сборка JavaScript
azproduction
0
180
Шаблонизация
azproduction
0
120
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
410
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
220
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Is Xcode slowly dying out in 2025?
uetyo
1
190
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
550
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
ReadMoreTextView
fornewid
1
480
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
XSLTで作るBrainfuck処理系
makki_d
0
210
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Site-Speed That Sticks
csswizardry
10
660
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Language of Interfaces
destraynor
158
25k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Adopting Sorbet at Scale
ufuk
77
9.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Docker and Python
trallard
44
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
Загрузка и инициализация JavaScript приложения Михаил Давыдов @azproduction JavaScript и
Node.js разработчик Dump-IT, Екатеринбург, 25 мая 2012
2 Мобильный веб
3 Не весь код используется 40 %
4 Браузерный кэш
5 Тестовый прототип, 7 Кб/с http://tinyurl.com/loader-test
<script src="main.js"> </script> <script src="module.js"> </script> 6 Последовательная загрузка и
исполнение
7 9 Запросов 131.5 Кб 18 с DOM 17.5 c
<script src="main.js" async> </script> <script src="module.js" async> </script> 8 Параллельная
загрузка и исполнение
9 9 Запросов 131.5 Кб 18 с DOM 1.5 c
$LAB .script('main.js') .wait() .script('module.js'); 10 Параллельная загрузка, последовательный запуск http://labjs.com/
11 10 Запросов 136.9 Кб 18.2 с DOM 3.7 c
↑0.2 ↑5.4 ↑1
$ cat **/*.js > main.js $ java -jar yuicompressor.jar \
main.js -o main.min.js 12 Собираем и пакуем http://tinyurl.com/yui-compressor
13 6 Запросов 48 Кб 9.5 с DOM 9.1 c
↓8.5 ↓83.5 ↓3
14 AppCache — оффлайн хранилище
<html manifest="example.appcache"> </html> CACHE MANIFEST # v1 - 2011-08-13 http://example.com/index.html
http://example.com/main.js 15 AppCache Манифест
16 Преимущества AppCache 1. Надежное кэширование 2. Работа оффлайн 3.
Простое управление версиями 4. Своевременное обновление http://tinyurl.com/mdn-appcache
17 Кэш — 0 запросов, 0 Кб
AMD — Асинхронная декларация модулей 18 Выборочная загрузка http://requirejs.org/
19 Преимущества АMD 1. Грузим основные части 2. Остальное по
необходимости 3. Автодогрузка зависимостей 4. ... 5. PROFIT
20 8 Запросов 31.5 7.4 с DOM 5.1 c +2
+30 Кб +4 c ↓2.1 ↓16.5 ↑2
LMD — Ленивая декларация модулей 21 Ленивая загрузка и инициализация
https://github.com/azproduction/lmd
22 Преимущества LMD 1. Ленивая инициализация 2. Node.js-подобные модули 3.
Встроенный сборщик и упаковщик 4. Гибкий объем библиотеки 5. Горячая сборка проекта
23 6 Запросов 18 5.1 с DOM 5.1 c +2
+30 Кб +4 c ↓2.3 ↓13.5 ↓2
9 131.5 Кб 18 с 24 6 Запросов 18 5.1
с DOM 5.1 c ↓12.9 ↓113 ↓3
25 1. Используйте AppCache http://tinyurl.com/mdn-appcache http://tinyurl.com/confessjs 2. Соберите скрипты 3.
LMD или AMD +
26 + 1. Используйте AppCache 2. Соберите скрипты http://tinyurl.com/yui-compressor 3.
LMD или AMD
27 + 1. Используйте AppCache 2. Соберите скрипты 3. LMD
или AMD https://github.com/azproduction/lmd http://requirejs.org/
28 OVER 9000 Achievement unlocked! JS
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
Михаил Давыдов JavaScript и Node.js разработчик
[email protected]
Twitter @azproduction Habr
http://azproduction.habrahabr.ru GitHub https://github.com/azproduction 30