На практике

Хранить информацию о зависимостях можно, например, следующим образом (добавляя в «модули» служебные комментарии):

// #REQUIRE: array.map.js

// #REQUIRE: sprintf.js

....

код

Выделить подобные метки из текстового файла не составляет труда. Естественно, чтобы получить полное дерево зависимостей, надо будет пройтись по всем доступных файлам – но полное дерево обычно не нужно.

К чему мы пришли?

Затратив один раз кучу времени на формирование модулей и зависимостей между ними, мы экономим время каждый раз , когда хотим уменьшить объем загружаемого клиентов внешнего файла. Это приятно. Но все‑таки часть проблемы осталась – пользователь загружает весь JavaScript‑код, который используется на сайте в течение первого захода на произвольную страницу, даже если на текущей странице этот код не нужен.

Итак, мы оставили нового пользователя наедине с единственным JavaScript‑файлом, не включающим ничего лишнего. Стал ли при этом пользователь счастливее? Ничуть. Наоборот, в среднем пользователь стал более несчастным, чем раньше, а причина этому – увеличившееся время загрузки страницы.

Немного из теории HTTP‑запросов

Время загрузки ресурса через HTTP‑соединение складывается из следующих основных элементов:

время отсылки запроса на сервер T1 – для большинства запросов величина практически постоянная;

время формирования ответа сервера – для статических ресурсов, которые мы сейчас и рассматриваем, пренебрежимо мало;

время получения ответа сервера T2, которое, в свою очередь, состоит из постоянной для сервера сетевой задержки L и времени получения ответа R, прямо пропорционального размеру ресурса.

Итак, время загрузки страницы будет состоять из времени загрузки HTML‑кода и всех внешних ресурсов: изображений, CSS‑ и JavaScript‑файлов. Основная проблема в том, что CSS и JavaSscript‑файлы загружаются последовательно (разработчики браузеров уже работают над решением этой проблемы в последних версиях, однако пока еще 99% пользователей страдают от последовательной загрузки). В этом случае общение с сервером выглядит так:

– запросили страницу

– получили HTML

– запросили ресурс A: T1

– получили ресурс A: L + R(A)

– запросили ресурс B: T1

– получили ресурс B: L + R(B)

– запросили ресурс C: T1

– получили ресурс C: L + R(C)

Общие временные затраты при этом составят 3(T1+L) + R(A+B+C).

Объединяя файлы, мы уменьшаем количество запросов на сервер:

– запросили страницу

– получили HTML

– запросили ресурс A+B+C: T1

– получили ресурс A+B+C: L + R(A + B + C)

Очевидна экономия в 2(T1 + L).

Для 20 ресурсов эта экономия составит уже 19(T1 + L). Если взять достаточно типичные сейчас для домашнего/офисного Интернета значения скорости в 256 Кбит/с и пинга ~20‑30 мс, получим экономию в 950 мс – одну секунду загрузки страницы. У людей же, пользующихся мобильным или спутниковым интернетом с пингом более 300 мс, разница времен загрузки страниц составит 6‑7 секунд.

На первый взгляд, теория говорит, что загрузка страниц должна стать быстрее. В чем же она разошлась с практикой?