jQuery / JavaScript - проблема производительности при большом количестве маленьких файлов .js?

Question

У меня есть сайт с большим количеством ссылочных .js-файлов; это довольно маленькие файлы, но я хочу, чтобы мои методы были разделены по темам / функциям.

Лучше ли хранить все методы в одном .js-файле или без проблем иметь много (~ 20 - 30) небольших файлов, включающих всего несколько строк?

Answer 1

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

Хорошая дискуссия на sitepoint.com

Для каждого из этих файлов HTTP запрос отправляется на сервер, и тогда браузер ждет ответа перед запросом следующего файла. Ограничения (или ограничения) браузера как правило, предотвращают параллельные загрузки. Это означает, что для каждого файла вы дождитесь запроса, чтобы достичь сервер, сервер для обработки запрос и ответ (включая сам контент), чтобы добраться до вас. Положил от начала до конца, некоторые из них могут сделать большая разница во времени загрузки страницы.

Answer 2

На самом деле плохая идея иметь так много ссылочных файлов. Основная идея проблем с производительностью заключается в том, чтобы как можно меньше свести к минимуму количество HTTP-запросов (по крайней мере, на рабочем сервере). Взгляните на это http://developer.yahoo.com/performance/rules.html#num_http

Answer 3

Я не знаю, какой фреймворк (если он есть) вы используете на сервере, но в Ruby on Rails есть функция включения скрипта, которая в зависимости от настроек (например, тестовая или производственная) может создавать множество тегов скриптов (обычно тестовых mode) или создайте один тег со всеми сценариями, объединенными в один (необязательно сжатый с некоторыми плагинами) файл. Я уверен, что многие другие фреймворки тоже поддерживают что-то подобное.

ОБНОВЛЕНИЕ: Я только что вспомнил: Вы также можете сжимать вручную (удаляя пробелы и комментарии, сокращая имена переменных и т. Д.) И комбинировать файлы JavaScript и CSS с Yahoo! Библиотека пользовательского интерфейса: YUI Compressor . Просто убедитесь, что ваш JavaScript правильный, прежде чем сжимать его, попробуйте JSLint .

Answer 4

У кого-нибудь есть умный скрипт nant, который может сделать это для вас? Я написал пользовательскую задачу nant, которая использует компрессор YUI для минимизации моих css и js, но было бы полезно добавить комбинирование к нему. Как вы, ребята, справляетесь с этим?