Что лучше для времени загрузки JavaScript: сжать все в один большой файл или загрузить все асинхронно?

Question

Простой вопрос, в котором я не уверен, если на него есть короткий ответ!

Описание
У меня есть файлы JavaScript, которые можно загрузить на веб-сайте здесь:некоторые примечания о них:

• Все они принадлежат одному домену (не требуется междоменная загрузка)
• Они идентичны по всему сайту.
• Естьнесколько файлов, таких как jQuery, и 5 других плагинов плюс мой собственный скрипт приложения, основанный на них.
• Их размер сжатый = 224 КБ (я объединяю все файлы в один файл, затем сжимаю их сразу, используяYUI Compressor 2

Проблема
Я слышал, что 224 КБ не идеально, чтобы быть в одном файле! И он должен быть разбит на несколько файлов с максимальным размером 44 КБ каждый.. Я не могу вспомнить, когда услышал это, и я не уверен, насколько эффективно разделить его на несколько файлов, но это правда, что 224 КБ занимает много времени для загрузки в первый раз, учитывая, что сайт загруженс изображениями и CSSконечно.

Я минимизировал необходимость ранней загрузки файла JavaScript и поместил его в конец, пока это хороший прогресс, но мне нужно загружать его ассинхронно с HTML, чтобы выиграть время Источник и решение, которое необходимо принять:

Да или нет?
Хранить в одном сжатом большом файле?или разделить их на множество сжатых файлов и загрузить асинхронно (я знаю, как обрабатывать проблемы, связанные с зависимостями)?

Answer 1

Зависит от того, что такое сайт и насколько важно для него время первой загрузки.

Несмотря на это, я бы, вероятно, загрузил JQuery и тому подобное из общедоступного CDN. Одним из больших преимуществ является то, что он может быть уже кэширован, даже если они никогда не были на вашем сайте.

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Команда Cappuccino - большой сторонник одного файла - они создают фреймворк javascript. Ожидается, что приложения, созданные с помощью этого инструмента, будут иметь некоторое время загрузки.

http://cappuccino.org/discuss/2009/11/11/just-one-file-with-cappuccino-0-8/

Answer 2

Еще одним преимуществом загрузки JQuery и связанных с ним общедоступных CDN было бы увеличение запросов по месту назначения. Я полагаю, что клиент ограничен 2 запросами на домен, поэтому, загружая jquery из google, а также плагин из jquery и код своего пользовательского приложения из собственного домена, браузер может выполнять их одновременно, а не ждать первые два, а затем выдача третьего запроса.

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

Answer 3

Вот что мы сделали, чтобы сделать наше веб-приложение быстрым.

Основные файлы JS и CSS сжаты и выровнены с разметкой HTML.Пробелы в HTML удаляются, а изображения преобразуются в data:image/png с помощью сценария оболочки.

Размер составляет ~ 400 КБ, но кэшируется и распаковывается.Мобильная версия веб-приложения такая же, но стоит около 250 КБ.Это означает, что все приложение готово к запуску, как исполняемый файл, за один HTTP-вызов.

Затем второй вызов http получает данные (JSON), и мы используем PURE , чтобы отобразить их в HTML с использованием существующих разметок на странице в качестве шаблонов.

Приложение разделено на модули, таким образом предварительно загружаются только общие модули.Другие приходят по запросу пользователя.

Answer 4

Точного ответа на этот вопрос нет. Это во многом зависит от того, как и когда вы используете эти файлы.

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

Кроме того, этот вопрос действителен только в том случае, если вы беспокоитесь о взаимодействии с пользователями впервые. Файлы JS будут кэшироваться в любом случае при каждом следующем посещении.