Мысли по поводу минимизации js файлов
Сейчас достаточно стандартной практикой стала минимизация js- и css-файлов. Сформировались как сервисы (Packer от Дена Эдвардса, JS Minifier), так и server-side скрипты для автоматической минимизации файлов (YUI Comressor, JSMin для PHP). Все это очень хорошо, я не спорю. Но мне сейчас хотелось бы обсудить «стратегию» минимизации.
Дело в том, что при оптимизации загрузки страницы, как правило, рассматривают вопрос снижения времени скачивания js-файлов, но упускают вопрос инициализации загруженного кода.
Возьмем пример из реальной практики. Допустим, мы имеем портал, в котором клиентская часть (только javascript) состоит из 75 файлов общим объемом 800 Кб, в которых хранятся классы, содержащие управляющую логику, настойки и т.п., и 70% из инициализируется сразу после загрузки.
Если мы открываем такую страничку как есть с подключением 75 небольших js-файлов, то формируются очереди обращений к серверу, который скорее всего не успеет за раз быстро отдать все файлы. Но за счет постепенной загрузки и инициализации файлов пользователь видит плавную, хотя и небыструю загрузку портала.
Если мы возьмем другой крайний случай, когда все файлы минимизированы и объединены в один файл, что, к слову сказать, часто не легко сделать, то с одной стороны у нас все круто: один запрос к серверы, минимальный объем скачиваемых данных (допустим, мы сжали до 400 Кб), а с другой пользователь сидит 10 секунд, а у него ничего не происходит.
Наиболее оптимальным в данном случае мне кажется следующий вариант. Мы разбиваем минимизированный пакет на 2-3 файла, причем первый делаем наименьшего размера и вмещающим тот минимум классов, достаточный для того, чтобы страница начала «оживляться», пока оставшиеся js-файлы будут подгружаться. Далее подгружается файл №2, который подхватывает инициализацию первого файла, в это время догружается файл №3 и далее по аналогии.
При выборе последнего варианта мы оставляем на приемлемом уровне количество запросов к серверу и общий размер js-файлов, но при этом не создаем ощущения «зависшего» браузера у пользователя при загрузке страницы.
Все вышеописанное, конечно, актуально для больших js-библиотек от 500 Кб.
