azproduction Jun 5 2012 at 17:21

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

10 min

43K

JavaScript*

+128

Comments 40

vasachi Jun 5 2012 at 17:54

Про AppCache не знал, спасибо. А статистика при его использовании какая?

SergeiStartsev Jun 5 2012 at 18:07

AppCache — это здорово, главное — не увлекаться=) Как веб-приложение может скачать в кэш 2 ГБ, а вы не заметите

azproduction Jun 5 2012 at 18:49

Это уже проблема реализации в конкретном браузере — можно же гибко модерировать квоту, спрашивая пользователя.

1ex Jun 5 2012 at 18:21

Впечатляет, спасибо. У нас проблема не стоит пока, но в будущем очень возможна )

Один момент, поправьте пожалуйста значек на значок

serf Jun 5 2012 at 18:34

Еще вариант интеллектуальной загрузки (predictive loading) или фоновой. Загрузка начинается не по требованию, а сразу после загрузки страницы. Пока модуль не загружен все возможные обращения к нему собираются в очередь. После загрузки модуля очередь исполняется и далее вызовы проходят напрямую.

kuzemchik Jun 5 2012 at 19:15

До конца не понял про LMD и require.js. Re.js генерит minified либы для проекта, LMD делает это на лету? Или что?

azproduction Jun 5 2012 at 19:54

Сборка
LMD собирает, сжимает, валидирует, stringify-ет все модули, входящие в проект(прописанные в конфиге) и создает из них 1 пакет/файл в который включает и свой оптимизированный по конфигу код. Все эти упаковки и сжатия гибко настраиваются для каждого модуля. Пакет получается таким, что наружу не видны никакие части приложения (не засоряются глобалы). Также возможны и off-package модули, которые загружаются по требованию.

Сборка на лету
При любом изменении файлов, входящих в пакет LMD его необходимо пересобрать. Это можно сделать либо руками/сервером по требованию, либо запустить LMD в режиме watch, что удобнее для разработки.

kuzemchik Jun 5 2012 at 19:58

То есть кроме как сборкой на лету от от require.js + r.js не отличается?

azproduction Jun 5 2012 at 20:23

Если бы не отличался, то в нем бы не было смысла.
1. Ленивая инициализация модулей
2. Можно не писать лишние обертки define() и тп — модули 1-в-1 Node.js
3. Максимально гибкая настройка объема lmd.js — десяток(пока) флагов в конфиге, которые включают/выключают определенные возможности — гибко меняют объем кода.
4. Кэширование модулей в localStorage, которое включается 2-3 опциями.

{   
    "cache": true
    "cache_async": true,
    "version": "1.6.7-2"
}

+index.html c кэшированием
5. Globalless
6. «Умный сборщик»

Тут я подробно описал его особенности github.com/azproduction/lmd

kuzemchik Jun 5 2012 at 20:29

ясно, спасибо, буду копать

pxx Jun 5 2012 at 19:56

AppCache это интересно, недавно изучал его. НО, заметил весьма интересный факт: ни один из сайтов, пишущих про AppCache, его не использует. Более того, я не нашел ни одного его реального использования на просторах интернетов.

azproduction Jun 5 2012 at 20:28

Mobile Twitter www.stevesouders.com/blog/2011/09/26/app-cache-localstorage-survey/ (инфа не очень свежая)

yeremeiev Jun 5 2012 at 20:59

Я встречаю периодически запрос на сохранение данных.
Но у AppCache довольно много других проблем: www.alistapart.com/articles/application-cache-is-a-douchebag/

sunnybear Jun 5 2012 at 22:42

одна из основных: в AppCache нужно перечислять все ресурсы страницы, иначе при повторном заходе неперечисленные ресурсы (например, картинки) не будут показаны. Таким образом AppCache больше подходит для веб-приложений, но никак не подходит для обычных сайтов / интернет-магазинов и т.д.

azproduction Jun 6 2012 at 00:24

NETWORK:
*

sunnybear Jun 6 2012 at 00:53

да, спасибо. Только после некоторого переосмысления у меня возник основной вопрос: а зачем нужен AppCache с усложненной логикой кэширования, если есть обычный кэш (и два механизма к нему: условное и безусловное кэширование)?

azproduction Jun 6 2012 at 00:57

Обычный — общий и поэтому может быть вытеснен любым сайтом: Expires +300years на 20Мб файл — бб кэш.

sunnybear Jun 6 2012 at 10:30

а AppCache не общий? Какие у него ограничения?

azproduction Jun 6 2012 at 12:58

В стандарте не написано, сколько должно быть и как распределяться. Есть данные за 2011 год от 5мб-Unlimited grinninggecko.com/developing-cross-platform-html5-offline-app-1/

z6Dabrata Jun 5 2012 at 23:48

В Chrome можно посмотреть все сайты, которые сохранили что-то в браузере:
chrome://appcache-internals/

pxx Jun 5 2012 at 20:01

У этого подхода, безусловно, есть один существенный минус — пользователю по клику на элемент ростера приходится ждать 4 секунды (чтобы загрузились остальные скрипты), что, конечно, не очень хорошо.

Это тоже можно оптимизировать: когда основной минимум ресурсов загрузился, можно начать асинхронно подгружать и, соответственно, кешировать скрипты, которые с большой вероятностью понадобятся в дальнейшем. Т. е. пока юзер смотрит в ростер и листает его, догружаются недостающие модули, когда он кликнет, с большой вероятностью всё уже будет готово.

sunnybear Jun 5 2012 at 22:33

288 байтов — это очень странный результат. Advanced оптимизация Google Compiler, которая ломает все обращения к зарезервированным переменным. Проверьте это, плиз.

Quadratoff Jun 6 2012 at 02:00

Почему я бы не рекомендовал использовать LMD — это синхронность. Она хороша для программиста, но очень неприятна пользователю. На время загрузки какого-либо большого модуля, ваша страница полностью зависнет, и перестанет реагировать на все клики и маусмувы пользователя. Это может быть довольно продолжительное время, например во время пика посещаемости, и/или временных снижениях скорости интернета.

azproduction Jun 6 2012 at 12:21

А вы пользовались как пользователь и писали как писатель прежде чем советовать?
Синхронна она при инициализации in-package модулей. Для всех остальных же способов загрузки — как и все другие лоадеры асинхронно(я не псих делать синхронный XHR) Пример такого

azproduction Jun 6 2012 at 12:25

Уберу (and synchronous) из ридми, а то это сбивает с толку.

Mithgol Jun 6 2012 at 08:55

Сочинение модулей в стиле Node.js одобряю.

ivnC Jun 6 2012 at 12:57

Не хотелось бы, чтобы у читателей сложилось мнение, что $LAB не помогает в оптимизации страниц. Очевидно, для данного примера это решение бесполезно. Но в случае «обычных» сайтов бывает полезным. Понятно, что AMD более продвинутый способ для загрузки, но он требует системного подхода к созданию рабочих файлов. Для веб-приложения системный подход оправдан, для прочих сайтов — нет, имхо.

jandosul Jun 7 2012 at 12:13

Чрезвычайно полезный пост

1ac3124 Jun 18 2012 at 18:25

А если использовать localStorage для серелизаии и хранения объектов, никто не пробовал?

azproduction Jun 18 2012 at 22:00

В LMD, который описан в конце этой статьи, кэширование модулей в localStorage прозрачно и включается 2-3 опциями в конфиге

{   
    "cache": true,       // включаем кэширование индексного файла
    "cache_async": true, // кэширование асинхронных модулей (с сервера)
    "version": "1.6.7-2" // версия для проверки состояния кэша
}

+кэш-лоадер вместо индексного файла

manny Jul 20 2012 at 11:56

manny Jul 20 2012 at 11:58

черт возьми. вкладкой ошибся.

Imbolc Mar 10 2013 at 15:47

А как в lmd отлаживать скомпилированный модуль?
Например, в require.js можно на локалке подключать модуль без компиляции. В browserify есть ключ --debug (сломался в 2.0, правда).
Я про то, чтобы в консоли браузера видеть реальные файл / строку.

azproduction Mar 10 2013 at 15:53

Можно собрать с SourceMap. Я дебажу без Source Map. LMD генерит предельно debugable код.

Imbolc Mar 10 2013 at 18:18

О, большое спасибо, разобрался. Немного не очевидна логика работы sourcemap + sourcemap_www + www_root. Ожидал что-то типа sourcemap_url.

azproduction Mar 10 2013 at 18:20

Дело в том, что LMD не знает ничего о вашей файловой системе, ни о wwwPath. Поэтому столько писанины, зато отличная переносимость ;-)

asheee Sep 8 2013 at 14:08

Интересно, нет ли чего-то типа Yeoman Generators для генерации базового проекта на LMD? Или чего-то типа `express .`.

azproduction Sep 8 2013 at 20:50

Нет, но можно в качестве основы взять github.com/2layer/2layer.github.io проект на Backbone+LMD с хорошим скелетом.

asheee Sep 8 2013 at 21:16

И еще один вопрос: мне нужно писать CJS-модули, которые я буду использовать и в браузере, и в ноде. Я правильно понимаю, что LMD мне хорошо подходит для этой задачи?

azproduction Sep 8 2013 at 21:18

Да, подходит. LMD использует CommonJS модули.

Show the best of all time