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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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