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

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

3 голосов
/ 20 июля 2010

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

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

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

Существует ли оптимальный размер для объединенногоФайлы JavaScript?

Ответы [ 2 ]

9 голосов
/ 21 июля 2010

Чем меньше HTTP-запросов, тем лучше.Если вы хотите, чтобы ваша страница работала также и на мобильных устройствах, оставьте общий размер каждого узла сценария менее 1 МБ (см. http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/)

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

Основная причина, по которой мы просим людей сократить 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 является однопоточным, тайм-аут будет срабатывать только после завершения onload, даже если для завершения onload требуется более 50 мс.

Теперь вместо глобальной переменной с именем script_url вы можете иметь узлы сценария вверх вашего документа, но с такими нераспознанными типами контента, как этот: 

<script type="text/x-javascript-deferred" src="...">

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

Обратите внимание, что некоторые браузеры также поддерживают атрибут defer для узлов сценария, который будет делать все это автоматически.

[*] Из-за ограничений размера окна TCP вы фактически не будете использовать всю имеющуюся пропускную способность.доступно для одной загрузки.Несколько параллельных загрузок могут более эффективно использовать вашу пропускную способность.

2 голосов
/ 20 июля 2010

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

Для производительности сети, чем меньше HTTP-запросов, тем лучше.

...