У нас есть около 30 внешних JavaScript на нашей странице. Каждый уже минифицирован.
Чтобы сократить HTTP-запросы и время загрузки страницы, мы рассматриваем возможность их объединения в один файл. Это было рекомендовано инструментом YSlow.
Разумно ли это или лучше объединить их, скажем, в два файла по 15 скриптов в каждом?
Существует ли оптимальный размер объединенных файлов JavaScript?
Чем меньше HTTP-запросов, тем лучше. Если вы хотите, чтобы ваша страница работала и на мобильных устройствах, оставьте общий размер каждого узла сценария не более 1 МБ (см. http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/)
Вы также можете проверить, можно ли отложить какой-либо из ваших сценариев после срабатывания onload. Затем вы можете создать два комбинированных файла, один из которых загружается на странице, а другой загружается после загрузки страницы.
Основная причина, по которой мы просим людей сократить HTTP-запросы, заключается в том, что вы платите за задержку при каждом запросе. Это проблема, если эти запросы выполняются последовательно. Если вы можете делать несколько запросов параллельно, то это гораздо лучше использует вашу пропускную способность[*], и вы платите за задержку только один раз. Асинхронная загрузка скриптов — хороший способ сделать это.
Чтобы загрузить скрипт после загрузки страницы, сделайте что-то вроде этого:
// This function should be attached to your onload handler
// it assumes a variable named script_url exists. You could easily
// extend it to use an array of scripts or figure it out some other
// way (see note late)
function lazy_load() {
setTimeout(function() {
var s = document.createElement("script");
s.src=script_url;
document.body.appendChild(s);
}, 50);
}
Это вызывается из onload и устанавливает тайм-аут на 50 мс позже, после чего он добавит новый узел скрипта в тело документа. После этого скрипт начнет скачиваться. Теперь, поскольку javascript является однопоточным, тайм-аут сработает только после завершения загрузки, даже если загрузка занимает более 50 мс.
Теперь вместо глобальной переменной с именем script_url вы можете иметь узлы сценария в верхней части документа, но с нераспознанными типами содержимого, например:
<script type="text/x-javascript-deferred" src="...">
Затем в вашей функции вам просто нужно получить все узлы сценария с этим типом контента и загрузить их srcs.
Обратите внимание, что некоторые браузеры также поддерживают атрибут defer для узлов сценариев, которые будут делать все это автоматически.
[*] Из-за ограничений размера окна TCP вы фактически не будете использовать всю доступную пропускную способность для одной загрузки. Несколько параллельных загрузок могут более эффективно использовать пропускную способность.
Браузер должен интерпретировать столько же javascript, когда все они объединены в один монолитный файл, сколько он делает, когда файлы разбиты, поэтому я бы сказал, что это не имеет никакого значения для производительности интерпретации и выполнения.
Для производительности сети чем меньше HTTP-запросов, тем лучше.
