Dump-IT Загрузка и инициализация JavaScript
Upcoming SlideShare
Loading in...5
×
 

Dump-IT Загрузка и инициализация JavaScript

on

  • 1,466 views

Dump-IT Загрузка и инициализация JavaScript

Dump-IT Загрузка и инициализация JavaScript

Statistics

Views

Total Views
1,466
Views on SlideShare
1,464
Embed Views
2

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dump-IT Загрузка и инициализация JavaScript Dump-IT Загрузка и инициализация JavaScript Presentation Transcript

  • Загрузка и инициализацияJavaScript приложенияМихаил Давыдов@azproductionJavaScript и Node.js разработчикDump-IT, Екатеринбург, 25 мая 2012
  • Мобильный веб2
  • 40 % Не весь код используется3 View slide
  • Браузерный кэш4 View slide
  • Тестовый прототип, 7 Кб/с http://tinyurl.com/loader-test5
  • Последовательная загрузка и исполнение<script src="main.js"></script><script src="module.js"></script>6
  • 9 Запросов 131.5 Кб 18 с DOM 17.5 c7
  • Параллельная загрузка и исполнение<script src="main.js" async></script><script src="module.js" async></script>8
  • 9 Запросов 131.5 Кб 18 с DOM 1.5 c9
  • Параллельная загрузка, последовательный запуск $LAB .script(main.js) .wait() .script(module.js); http://labjs.com/10
  • 10 Запросов ↑1 136.9 Кб ↑5.4 18.2 с ↑0.2 DOM 3.7 c11
  • Собираем и пакуем $ cat **/*.js > main.js $ java -jar yuicompressor.jar main.js -o main.min.js http://tinyurl.com/yui-compressor12
  • 6 Запросов ↓3 48 Кб ↓83.5 9.5 с ↓8.5 DOM 9.1 c13
  • AppCache — оффлайн хранилище14
  • AppCache Манифест <html manifest="example.appcache"> </html> CACHE MANIFEST # v1 - 2011-08-13 http://example.com/index.html http://example.com/main.js15
  • Преимущества AppCache1. Надежное кэширование2. Работа оффлайн3. Простое управление версиями4. Своевременное обновление http://tinyurl.com/mdn-appcache16
  • Кэш — 0 запросов, 0 Кб17
  • Выборочная загрузка AMD — Асинхронная декларация модулей http://requirejs.org/18
  • Преимущества АMD1. Грузим основные части2. Остальное по необходимости3. Автодогрузка зависимостей4. ...5. PROFIT19
  • 8 Запросов +2 ↑2 31.5 +30 Кб ↓16.5 7.4 с +4 c ↓2.1 DOM 5.1 c20
  • Ленивая загрузка и инициализация LMD — Ленивая декларация модулей https://github.com/azproduction/lmd21
  • Преимущества LMD1. Ленивая инициализация2. Node.js-подобные модули3. Встроенный сборщик и упаковщик4. Гибкий объем библиотеки5. Горячая сборка проекта22
  • 6 Запросов +2 ↓2 18 +30 Кб ↓13.5 5.1 с +4 c ↓2.3 DOM 5.1 c23
  • 6 Запросов 9 ↓3 18 131.5 Кб ↓113 5.1 с 18 с ↓12.9 DOM 5.1 c24
  • 1. Используйте AppCache +http://tinyurl.com/mdn-appcachehttp://tinyurl.com/confessjs2. Соберите скрипты3. LMD или AMD25
  • 1. Используйте AppCache2. Соберите скрипты +http://tinyurl.com/yui-compressor3. LMD или AMD26
  • 1. Используйте AppCache2. Соберите скрипты +3. LMD или AMDhttps://github.com/azproduction/lmdhttp://requirejs.org/27
  • OVER 9000 JS Achievement unlocked!28
  • Вопросы?Тест http://tinyurl.com/loader-test LMD https://github.com/azproduction/lmd Confess http://tinyurl.com/confessjs Require http://requirejs.org/ YUIC http://tinyurl.com/yui-compressor CanIUse http://caniuse.com/29
  • Михаил Давыдов JavaScript и Node.js разработчик azproduction@yandex-team.ru Twitter @azproduction Habr http://azproduction.habrahabr.ru GitHub https://github.com/azproduction30