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
99
HTML5 Camp - JavaScript на фронте и в тылу
azproduction
0
270
Code Fest - Работает? Стабильно? Эффективно?
azproduction
0
140
UWDC - Модули и сборка JavaScript
azproduction
0
190
Шаблонизация
azproduction
0
120
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
740
NPOでのDevinの活用
codeforeveryone
0
870
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
640
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
150
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
TypeScriptでDXを上げろ! Hono編
yusukebe
1
400
Goで作る、開発・CI環境
sin392
0
240
Featured
See All Featured
A better future with KSS
kneath
238
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Optimizing for Happiness
mojombo
379
70k
Typedesign – Prime Four
hannesfritz
42
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Visualization
eitanlees
146
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
320
Thoughts on Productivity
jonyablonski
69
4.7k
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