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
220
Загрузка и Инициализация 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
240
Promise – это не больно
azproduction
0
180
Components Now!
azproduction
3
120
ШРИ - JavaScript Event Model
azproduction
0
170
ШРИ - Code Style
azproduction
0
88
HTML5 Camp - JavaScript на фронте и в тылу
azproduction
0
220
Code Fest - Работает? Стабильно? Эффективно?
azproduction
0
89
UWDC - Модули и сборка JavaScript
azproduction
0
130
Шаблонизация
azproduction
0
100
Other Decks in Programming
See All in Programming
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
Activities at Cairo Library
cairolibrary720
0
1.2k
유연한 Composable 설계
l2hyunwoo
0
380
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Introduction to GitOps
hwchiu
0
110
Namespace on read
tagomoris
2
370
CSC307 Lecture 12
javiergs
PRO
0
220
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Adopting Sorbet at Scale
ufuk
71
8.8k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
A designer walks into a library…
pauljervisheath
201
24k
Code Review Best Practice
trishagee
58
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
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