На типичной веб-странице я загружаю следующее, все из CDN:

  • Jquery
  • угловатый
  • начальная загрузка
  • Icomoon
  • несколько угловых плагинов

Лучше загружать их из 1 CDN (если возможно) или из разных CDN? Есть ли лучшие практики для этого, или это не имеет значения?

27
Jimmery 4 Сен 2017 в 17:29

9 ответов

Лучший ответ

С точки зрения использования одного или нескольких CDN, это не будет проблемой в зависимости от того, сколько компонентов вы загружаете с одного имени хоста, в соответствии с этим от Yahoo UI Team, HTTP / 1.1 предлагается, чтобы браузеры ограничивали число параллельных загрузок до двух на имя хоста. Поэтому, используя несколько источников CDN, разные имена хостов должны быть хорошей практикой.

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

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

Как отмечалось в комментариях @JeffPuckett, браузеры имеют более высокий лимит одновременной загрузки на сервер / прокси-сервер в наши дни:

Firefox 2:  2
Firefox 3+: 6
Opera 9.26: 4
Opera 12:   6
Safari 3:   4
Safari 5:   6
IE 7:       2
IE 8:       6
IE 10:      8
Chrome:     6

Ссылка: https://stackoverflow.com/a/985704/4488121

14
lenilsondc 13 Авг 2018 в 16:37

Хороший вопрос, который стоит задать сейчас, когда большинство браузеров поддерживают HTTP2, таков: поддерживает ли мой CDN HTTP2? Если это так, вероятно, что конвейеризация этих запросов через 1 CDN происходит быстрее. Это также может сохранить DNS-запросы, если другие CDN еще не кэшированы. Если CDN поддерживает push, это также может увеличить скорость, так как многим из этих библиотек требуется несколько файлов.

0
pucky124 13 Сен 2017 в 01:44

Следует избегать прямого использования нескольких ссылок CDN на одной странице, так как это влияет на производительность. Вы можете попробовать следующий код для добавления нескольких ссылок CDN.

bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/jquery",
@"//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js"
).Include(
"~/Scripts/jquery-{version}.js"));

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

2
lazydeveloper 12 Сен 2017 в 18:00

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

Поэтому попытка максимизировать каждый CDN путем загрузки как минимум 2–6 ресурсов, вероятно, была бы наилучшим компромиссом.

2
light_303 13 Сен 2017 в 13:17

Вы должны стараться избегать использования CDN как: -

  1. Если CDN выполняется по какой-либо причине, это также повлияет на ваше приложение, и вы также можете столкнуться с простоями, которые никогда не должны происходить в рабочем коде.
  2. для CDN браузер должен сканировать разные домены, а затем загружать необходимые файлы, что займет больше времени
  3. Отсутствие запросов к другим доменам также замедлит время загрузки вашего приложения.

Браузер имеет ограничение в 6 запросов одновременно, поэтому, если вы делаете много запросов одновременно, они будут в очереди и будут занимать больше времени, поэтому постарайтесь свести к минимуму количество запросов.

Рекомендация -

Пользователь Бауэр / Grunt или Webpack в вашем применение -

  1. Bower перенесет все зависимости вашего приложения на ваш локальный сервер / компьютер, так что ему не нужно искать в разных доменах, чтобы получить необходимые файлы
  2. Grunt объединит и объединит все файлы в один файл, так что его размер уменьшится, и из браузера будет сделано меньше запросов на загрузку файлов.

Если у вас есть какие-либо сомнения относительно болтовни / хрюканья, я могу вам в этом помочь.

-2
Shubham Tripathi 7 Сен 2017 в 18:59

Вы можете легко использовать cdn для извлечения данных

-2
Prashant 28 Сен 2017 в 17:11

Рекомендуется использовать как CDN, так и резервные (локальные файлы). Чтобы ответить на ваш вопрос, вы должны использовать несколько путей CDN, как будто один CDN не работает, по крайней мере, остальные работают и работают. Для CDN вниз запасной вариант будет тренироваться.

Вкратце, используйте оба, это лучшая практика, которой я следую в своих проектах.

0
Krishna9960 13 Сен 2017 в 11:11

Принятый ответ настолько устарел, и справочный документ от Yahoo был опубликован в 2007 году, и он имел особое отношение к HTTP / 1.1. См. Правильную информацию для HTTP / 2: Повышается ли ограничение на количество подключений к хосту с помощью HTTP / 2?

Я бы сказал с точностью до наоборот. Лучше загружать все больше и больше ресурсов с одного и того же хоста, в данном случае CDN, если он поддерживает HTTP / 2. Поддержка браузером HTTP / 2 довольно высока и через несколько лет достигнет почти 100%. (в сочетании с HTTP / 3).

Кроме того, существуют затраты, связанные с использованием большего количества CDN для загрузки файлов:

  1. Несколько DNS-запросов.
  2. Несколько подключений на страницу загрузки.
  3. Не оптимально для мобильных устройств.

Теперь, отвечая на ваши конкретные вопросы:

Лучше ли загружать их из 1 CDN или разных CDN? Поскольку все CDN в настоящее время поддерживают HTTP / 2 по умолчанию, рекомендуется использовать один CDN для большего и большего количества контента, если это возможно. Кстати, существует CDN, PageCDN, который был создан только для решения этой проблемы случайного разбиения домена , Они предоставляют библиотеки javascript, Шрифты и частный CDN на одном хосте, чтобы получить большую часть одного соединения HTTP / 2.

Есть ли лучшие практики для этого? Лучшая практика это: 1. Уменьшите количество DNS-запросов. 2. Уменьшите связи. Предпочитайте меньше CDN / хостов, чем больше CDN / хостов. 3. НЕ СВЯЗАТЬ ФАЙЛЫ. Многие разработчики рекомендуют вам связывать файлы, но команда Google Chrome V8 не рекомендует это. 4. Используйте метатег preconnect, чтобы сэкономить время соединения.

Разве это не имеет значения? Да, использование CDN имеет значение, так как он может использовать кеш браузера другого сайта для ваших целей, так что даже ваши первые посетители получают очень быструю загрузку страниц.

2
Ibtsam Ch 30 Окт 2019 в 14:56

Боюсь, что на этот вопрос нет ответа, как обычно. Вот мои 2 цента. В отличие от количества одновременных подключений и браузеров / стандартов, я хочу взглянуть на это с другой точки зрения.

Для ваших пользователей и вашего сервера важнее всего время загрузки страницы и доступность сервиса. Самое быстрое время загрузки - загрузка из кеша. Чем больше ваших пользователей используют определенный файл из определенного CDN , тем больше шансов на попадание в кэш.

Исходя из этой цели, имеет смысл

  • Загружайте популярные библиотеки из популярных CDN, в зависимости от списка библиотек могут быть одинаковые CDN или разные CDN. Я бы сказал, что количество параллельных HTTP-соединений браузера является второстепенным аргументом.
  • Объединяйте и минимизируйте пользовательские сценарии и редко используемые сторонние библиотеки в настолько мало файлов, сколько это целесообразно (например, один CSS и один JS), и загружайте с собственного хоста или собственного CDN (если у вас есть тонны пользователей, прибывающих из разных мест или даже континентов) CDN, вероятно, не роскошь для вас).
  • Если сценарии на основе CDN по какой-либо причине не были загружены из CDN, перейдите на локальную копию.
  • Если у вас есть такая опция, выберите наиболее используемую версию библиотек, которая, скорее всего, не самая последняя.

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

Для статистики вы можете использовать что-то вроде w3techs:

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

Теперь для версий, если у вас есть возможность изменить версии. Если вы решили использовать первый вариант «несколько сайтов с высоким трафиком», определенно стоит проверить, какую версию библиотеки из CDN они используют. В противном случае, для варианта «много низкого трафика» наиболее популярная версия предпочтительнее. Тот же w3tech должен иметь статистику.

Это может показаться большим трудом, но это делается редко (если не один раз), поскольку статистика, как правило, меняется довольно медленно.

4
isp-zax 13 Сен 2017 в 05:20