Javascript. Чтобы объединить или не объединить, это вопрос

Хорошо, поэтому я знаю, что очевидно, что для объединения всех страниц Javascript в один внешний файл для повышения эффективности, но это не совсем вопрос здесь.

Скажем, у меня есть Default.htm с полем поиска, в котором есть маленькая маска Javascript. Затем у меня есть Contact.htm с контактной формой, в которой к ней прилагается магия Javascript. И, наконец, у меня есть FAQ.htm с некоторыми панелями jQuery, показывающими ответы... вы получаете изображение.

В принципе, у меня есть три страницы, для которых у всех есть "некоторые" требования к javascript, но ни один из Javascript не используется на других страницах.

Лучше ли комбинировать весь этот Javascript в один большой файл с мини файлами, который загружается один раз и затем хранится в кеше, или лучше использовать отдельный файл Javascript на странице по умолчанию, но не использовать его на странице контактов... и т.д.

Что лучше всего работает в этом сценарии?

Опция: 1

Default.htm
jquery.js
default.js

contact.htm
jquery.js
contact.js

Faq.htm
jquery.js
faq.js

Опция: 2

Default.htm
JQuery-умолчанию контакт-чаво-min.js

contact.htm
JQuery-умолчанию контакт-чаво-min.js

Faq.htm
JQuery-умолчанию контакт-чаво-min.js

PS: для всех вас, ребята asp.net, я использую Combres для Combine, Minify и Version для своих файлов Javascript

Ответ 1

Я бы определенно проголосовал за их объединение. Если вас беспокоит синтаксический анализ или время установки для "не использованного" Javascript, я бы рекомендовал структурировать ваш Javascript с каждым файлом в закрытии, а затем запустить блокировки, которые вам нужны на страницах, которые вам нужны. Например:

// File 1
window.closures = window.closures || {}
window.closures["page1"] = (function() {
  // Javascript for Page 1
});

// File 2
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});    

// File 3
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});

Затем на вашей странице:

<!-- This one combined.js file will be downloaded once and cached //-->
<script type="text/javascript" src="combined.js"></script>
<script>
  // Run the Javascript in your combined.js intended for page2
  window.closures["page2"]()
</script>

Ответ 2

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

Ответ 3

Это всегда действие балансировки количества HTTP-запросов и ограничение переданных байтов, которые еще не нужны.

Существует три возможности:

объединить все в 1 файл
имеют три отдельных файла и загружают их по мере необходимости
есть три отдельных файла, загрузите тот, который необходим для этой страницы, и предварительно загрузите остальные (когда время будет правильным)

Вы только знаете, что лучше всего подходит для вашей ситуации, выполнив тестирование нагрузки A-B.

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

Ответ 4

Поскольку это не похоже на то, что много javascript, объединение его в один файл было бы лучше. Только если имеется значительное количество javascript, который не нужно загружать, если пользователь не посещает страницу, вы бы хотели сохранить файлы отдельно.

Ответ 5

Если объединенный файл находится под словом "say", 25kb minified, затем перейдите к нему. Но если это более того, я бы сказал, определите тот, который является самым большим из них, и пусть один JS файл будет отдельным. Объедините остальные. Это ограничение в 25 килобайт тоже не является жестким правилом, это зависит от вас.

Если ваши отдельные файлы имеют размер, скажем, 30 кбайт, я бы рекомендовал не комбинировать их и позволить отдельным js файлам кэшироваться как отдельные js файлы.

Надеюсь, что это поможет.