Объединение файлов JavaScript в соответствии с рекомендациями YSlow - оптимальный размер?

У нас есть около 30 внешних JavaScripts на нашей странице. Каждый уже уменьшен.

Чтобы уменьшить HTTP-запросы и время загрузки страницы, мы рассматриваем возможность объединения их в один файл. Это было рекомендовано инструментом YSlow.

Разумно ли это, или лучше объединить их, скажем, в два файла по 15 скриптов в каждом?

Есть ли оптимальный размер для объединенных файлов JavaScript?

Источник

2 ответа

Решение

Чем меньше 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-запросов, тем лучше.

Источник
Другие вопросы по тегам