Как я могу снизить затраты на загрузку больших библиотек JS?

23

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

javascript performance

— Мача
источник

25

Есть 4 вещи, которые вы можете сделать.

Сократите свой JS-файл. Это удаляет все комментарии и пробелы, чтобы уменьшить его размер.
Объедините ваши JS-файлы на каждой странице, чтобы был только 1 файл.
Используйте пакет, чтобы сжать ваши файлы при отправке. Это сделает их еще меньше
Поместите Javascript, который не требуется, сразу внизу страницы, чтобы он загружался в конце. Это позволит пользователю видеть и использовать страницу даже до полной загрузки JS.

И некоторые другие люди предложили:

Apache автоматически обрабатывает сжатие (и кэширование сжатого содержимого), что значительно упрощает управление файлами
Правильное использование кеша в JavaScript даст большие преимущества.
Домены с подстановочными знаками (с несколькими URI) позволят больше одновременных соединений. Предварительная выборка не только для изображений /

— Бен Хоффман
источник

Есть больше вещей, которые вы можете сделать, и лучшие способы сделать это. Apache автоматически обрабатывает сжатие (и кэширование сжатого содержимого), что значительно упрощает управление файлами. Правильно кэшируемый javascript даст большие преимущества. Домены с подстановочными знаками (с несколькими URI) позволят больше одновременных соединений. Предварительная выборка не только для изображений /

— symcbean

21

Если вы используете обычные библиотеки (такие как jQuery, Prototype или Dojo), вы можете загрузить файл в Google и заставить его обслуживать его , это дает вам несколько преимуществ:

Вам не нужно беспокоиться о минификации, архивации и т. Д.
Это не ваша пропускная способность
Эти файлы поступают из другого домена, поэтому вы можете (хотя бы частично) обойти ограничение в 2 параллельных запроса на имя хоста
Если вам повезет, пользователь уже посетил какой-то другой сайт, который использовал ту же библиотеку от того же провайдера, поэтому он уже есть в кэше браузера.

Примечание. Запрошенная вами версия может оказать большое влияние на характеристики кэширования: запрос jQuery 1.4.2 даст вам файл, который можно кэшировать в течение года, а 1.4 можно кэшировать только в течение часа.

— Cebjyre
источник

1

+1 для CDN и scriptsrc.net, чтобы сделать его еще проще;)

— Agos

1

Можете ли вы расширить свою «заметку»? Почему разница во времени кеширования?

— Звоните им

2

@theycallmemorty: Хотя я не проверял документы, я бы предположил, что это потому, что, указав 1.4.2, вы очень точно описываете версию, которую вы хотите, а при запросе версии 1.4 вы в основном говорите «дайте мне больше всего». Последняя версия под 1.4 ", поэтому они не кешируют ее так сильно.

— Жаф - Бен Дюгид

Также стоит отметить, что Microsoft делает некоторые библиотеки JS (jQuery и некоторые специфичные для MS) доступными на своих CDN, которые также поддерживают https (который не поддерживают многие другие CDN- скрипты

— Bert Lamb

6

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

— txwikinger
источник

+1, поскольку вы можете поместить всю библиотеку в один файл и сжать ее. Не думал об этом.

— Гордон Густафсон

4

В дополнение к ответам выше, вы можете использовать Google Closure Compiler для автоматического сжатия и оптимизации вашего JS при интеграции с другими сторонними библиотеками (jQuery, YUI, mootools и т. Д.)

— theycallmemorty
источник

0

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

Как отмечает Стив Соудерс в своем блоге «Высокопроизводительные веб-сайты» -

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

в другом месте он пишет ..

Браузеры открывают ограниченное количество соединений на домен ... Разделение или разделение запросов между двумя доменами, в отличие от одного домена, приводит к более быстрой странице, особенно в IE 6 и 7

— mvark
источник