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

23

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

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

Ответы:

25

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

  1. Сократите свой JS-файл. Это удаляет все комментарии и пробелы, чтобы уменьшить его размер.
  2. Объедините ваши JS-файлы на каждой странице, чтобы был только 1 файл.
  3. Используйте пакет, чтобы сжать ваши файлы при отправке. Это сделает их еще меньше
  4. Поместите 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
источник