Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <p><a>#статьи</a></p>

2 <ul><li>5 ноя 2025</li>

3 <li>0</li>

4 </ul><p>Благодаря ей сайты открываются быстрее, чем вы успеваете моргнуть.</p>

5 <p>Иллюстрация: Оля Ежак для Skillbox Media</p>

6 <p>Адепт виртуальной реальности. Пишет новости и статьи для Skillbox Media, временами смотрит аниме и вышивает крестиком, но это не точно.</p>

7 <p>Вы когда-нибудь задумывались, почему сайты с серверами на другом конце земного шара открываются мгновенно? Всё дело в технологии CDN (content delivery network) - сети доставки контента. Без неё современный интернет был бы гораздо медленнее и нестабильнее.</p>

8 <p>Из статьи вы узнаете, что такое технология CDN, как она работает, какие преимущества даёт и почему нужна всем крупным веб-сервисам.</p>

9 <p><strong>Содержание</strong></p>

10 <ul><li><a>Что такое сеть доставки контента</a></li>

11 <li><a>Как появилась технология и какие преимущества она даёт</a></li>

12 <li><a>Как работает CDN</a></li>

13 <li><a>Виды CDN и примеры провайдеров</a></li>

14 <li><a>Тестируем сеть доставки контента на простом примере</a></li>

15 </ul><p>CDN - это географически распределённая сеть серверов, которые находятся в разных точках мира. На них кэшируются и хранятся копии статического контента сайтов: изображения, CSS- и JavaScript-файлы, видео, аудио, шрифты, документы и другие неизменяемые данные.</p>

16 <p>CDN доставляет данные с ближайшего узла сети (<a>point of presence</a>), а не с сервера-первоисточника (<a>upstream server</a>). Это значительно сокращает время загрузки, поскольку физическое расстояние между пользователем и сервером уменьшается. Контент быстро доходит до клиента, даже если исходный сервер расположен на другом конце земного шара.</p>

17 <p>CDN можно сравнить с сетью продуктовых магазинов, которые разбросаны по всему городу. Вместо того чтобы ехать за продуктами на главный склад на другом конце города (сервер-первоисточник), вы заходите в магазин возле дома (узел CDN) и покупаете те же товары.</p>

18 Схема доставки контента: напрямую и через CDN<em>Инфографика: Skillbox Media</em><p>CDN возникла с ростом интернета. По мере развития Сети увеличивался объём данных: сайты перестали быть столбцами текста и наполнились тяжёлыми изображениями, видео, музыкой и 3D-графикой. Появились стриминговые сервисы и видеохостинги. За последние десять лет медианный вес веб-страницы на десктопе<a>вырос</a>почти в четыре раза - с 735 КБ до 2652 КБ.</p>

19 <p>Помимо веса веб-страниц, росло и количество пользователей интернета. Миллионы людей одновременно открывают одни и те же страницы, смотрят видео, листают изображения. Один сервер неспособен выдержать такую нагрузку и стабильно обрабатывать запросы со всего мира. Именно поэтому появилась технология CDN, которая решает проблему масштабирования и географической доступности контента.</p>

20 <p>Когда поступает много запросов, нагрузка распределяется между всеми серверами в сети - это предотвращает перегрузку отдельных узлов. А если один из узлов выходит из строя, запрос автоматически перенаправляется на ближайший сервер. Так обеспечивается бесперебойная работа и высокая отказоустойчивость системы.</p>

21 <p>CDN также частично фильтрует трафик и защищает сайт от DDoS-атак, если провайдер предоставляет эту функцию. Это происходит за счёт того, что серверы анализируют входящие запросы и блокируют подозрительный трафик до того, как он достигнет основного сервера.</p>

22 <p>Например, если злоумышленники попытаются перегрузить сайт поддельными запросами, CDN распознает аномальную активность. В результате на сервер попадут только запросы реальных пользователей.</p>

23 <p>Работу CDN можно разделить на несколько основных этапов:</p>

24 <ul><li>Сначала пользователь обращается к домену сайта.</li>

25 <li>CDN перенаправляет запрос на ближайший узел.</li>

26 <li>Если файла нет, CDN запрашивает его с сервера-первоисточника или соседнего узла, сохраняет в кэше и передаёт пользователю.</li>

27 <li>При следующем аналогичном запросе файл доставляется из CDN - обращаться к серверу-первоисточнику не требуется.</li>

28 </ul><p>Для примера возьмём пользователя, который сидит в Москве и отправляет запрос к библиотеке Spotify где-нибудь в Стокгольме.</p>

29 <p><strong>Без CDN</strong>данные каждый раз проходят путь от сервера-первоисточника до пользователя. В результате композиция грузится дольше, а качество звучания зависит от расстояния до Стокгольма и скорости соединения.</p>

30 <p><strong>С CDN</strong>всё работает иначе. Когда пользователь из Москвы запрашивает трек, CDN перенаправляет запрос на ближайший узел - например, в Хельсинки. Если копия трека уже находится в кэше, она сразу передаётся слушателю. Если нет - CDN запрашивает файл с сервера в Стокгольме, сохраняет его на узле в Хельсинки и отдаёт пользователю.</p>

31 <p>Когда этот или любой другой слушатель сделает новый запрос на тот же трек, файл будет загружаться уже из Хельсинки. Расстояние меньше - поэтому трек загружается быстрее и воспроизводится стабильнее.</p>

32 - Слева - раздача трафика от одного сервера-первоисточника, справа - с использованием CDN<em>Изображение: Д. Ильин / Wikimedia Commons</em><p>При этом динамический контент не кэшируется на серверах CDN, однако запросы по-прежнему проходят через ближайший узел. Он оптимизирует маршрут передачи данных, устанавливает защищённое соединение и перенаправляет запросы на основной сервер.</p>

32 + Слева - раздача трафика от одного сервера-первоисточника, справа - с использованием CDN<em>Изображение: Д. Ильин / Wikimedia Commons</em><p>При этом динамический контент не кэшируется на серверах CDN, однако запросы по-прежнему проходят через ближайший узел. Он оптимизирует маршрут перед��чи данных, устанавливает защищённое соединение и перенаправляет запросы на основной сервер.</p>

33 <p>Например, когда пользователь в Москве добавляет трек в плейлист Spotify или меняет настройки аккаунта, CDN-узел в Хельсинки выступает посредником. Он принимает запрос, устанавливает защищённое TLS-соединение с сервером в Стокгольме и передаёт данные в обоих направлениях по оптимизированным маршрутам.</p>

34 <p>CDN-сети не существуют сами по себе - за их работу отвечают CDN-провайдеры. Это компании, которые строят и поддерживают всю инфраструктуру распределённых серверов, размещают их в различных точках и предоставляют владельцам сайтов доступ к своим мощностям.</p>

35 <p>Всех провайдеров можно разделить на две категории:</p>

36 <ul><li><strong>Независимые провайдеры</strong> - их выбирает большинство сайтов и сервисов. Они создают публичные CDN, к которым может подключиться любой желающий по подписке или условно-бесплатным тарифам. К таким провайдерам относятся<a>Cloudflare</a>,<a>Akamai</a>,<a>jsDelivr</a>,<a>Cdnjs</a>,<a>Google Hosted Libraries</a>и другие.</li>

37 <li><strong>Крупные корпорации</strong>, которые создают сети доставки контента для своих сервисов, - например,<a>Google Cloud CDN</a>,<a>Microsoft (Azure CDN)</a>или<a>Netflix Open Connect</a>. Их инфраструктура обычно приватная и оптимизирована под конкретные задачи компании.</li>

38 </ul><p>Выбор провайдера зависит от типа контента, географии аудитории и требований к скорости и безопасности. Для небольших сайтов подойдут публичные CDN с простым подключением, базовой защитой от DDoS-атак и бесплатными тарифами - например, Cloudflare или jsDelivr.</p>

39 <p>Бизнесу с широкой географией, высоким трафиком и чувствительными данными стоит рассмотреть платные решения. Они предлагают тонкую настройку маршрутов доставки контента, детальную аналитику, автоматическое распределение нагрузки между серверами, расширенные механизмы защиты от DDoS-атак и возможность создания приватных CDN-сетей с индивидуальной конфигурацией.</p>

40 <p>Также учтите, что в определённых ситуациях сеть CDN может быть вообще не нужна. Это касается проектов, которые обслуживают локальную аудиторию и не содержат тяжёлого контента, - например, личных сайтов или блогов без видео и большого количества изображений. В таких случаях быстрее и дешевле воспользоваться обычным хостингом.</p>

41 Схема работы CDN: провайдеры размещают узлы сети по всему миру, чтобы данные с основного сервера быстрее доходили до пользователей<em>Изображение:<a>Microsoft</a></em><p>CDN-сервисами часто пользуются фронтенд-разработчики, поскольку это удобный способ подключать шрифты, фреймворки, библиотеки и изображения без загрузки их на сервер или локальный диск. Для этого вам достаточно добавить ссылки на нужные ресурсы в HTML-файл.</p>

42 <p>Чтобы попробовать это на практике, установите<a>VS Code</a>или другой редактор кода. После этого создайте новый файл, назовите его index.html, добавьте в него следующий код и сохраните изменения:</p>

43 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Пример работы через CDN</title>  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <style> body { font-family: "Inter", system-ui, sans-serif; background: #f0f0f0; margin: 2rem; color: #212529; } .note { text-align: center; color: #6c757d; margin-bottom: 2rem; font-size: 1.1rem; } .font-demo { text-align: center; font-size: 1.2rem; margin-bottom: 2rem; } .text-center a { margin-bottom: 2rem; display: inline-block; } /* Слайдер */ .slider { position: relative; max-width: 720px; margin: 2rem auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); aspect-ratio: 16 / 9; min-height: 260px; background: #e9ecef; } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .slide.active { opacity: 1; } .slide img { width: 100%; height: 100%; object-fit: cover; } .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, .6); color: #fff; border: 0; padding: .4rem .8rem; border-radius: 6px; cursor: pointer; } .prev { left: 10px; } .next { right: 10px; } </style> </head> <body> <p class="note"> Всё на этой странице работает через CDN - шрифт, стили, скрипты и изображения. </p> <p class="font-demo"> Этот текст набран шрифтом <strong>Inter</strong> и загружается из Google Fonts CDN. </p>  <div class="text-center"> <a href="https://getbootstrap.com" class="btn btn-primary btn-lg" target="_blank" rel="noopener noreferrer"> Перейти на сайт Bootstrap </a> </div>  <div class="slider" id="slider"> <div class="slide active"><img src="https://picsum.photos/id/1015/1200/600" alt=""></div> <div class="slide"><img src="https://picsum.photos/id/1036/1200/600" alt=""></div> <div class="slide"><img src="https://picsum.photos/id/1043/1200/600" alt=""></div> <button class="nav prev" aria-label="prev">&#10094;</button> <button class="nav next" aria-label="next">&#10095;</button> </div>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script> // Простой слайдер на jQuery: кнопки и автопрокрутка $(function () { const $s = $('#slider'), $slides = $s.find('.slide'); let i = 0; function show(n) { i = (n + $slides.length) % $slides.length; $slides.removeClass('active').eq(i).addClass('active'); } $s.find('.next').on('click', () => show(i + 1)); $s.find('.prev').on('click', () => show(i - 1)); setInterval(() => show(i + 1), 3000); }); </script> </body> </html><p>Когда вы откроете страницу в браузере, увидите, что через CDN работают все элементы - от шрифтов и стилей до картинок и скриптов:</p>

44 <ul><li>шрифт Inter подключается из <a>Google Fonts CDN</a>;</li>

45 <li>CSS-фреймворк Bootstrap загружается через<a>jsDelivr CDN</a>и отвечает за оформление кнопки и базовые стили страницы;</li>

46 <li>изображения в слайдере грузятся из сервиса<a>Picsum Photos CDN</a>;</li>

47 <li>библиотека jQuery подключается через<a>Cdnjs CDN</a>и управляет функциональностью слайдера.</li>

48 </ul><p>То есть мы получили интерфейс, который полностью работает на ресурсах из разных CDN-серверов - без единого локального файла.</p>

49 <em>Скриншот: Visual Studio Code /<a>Picsum</a>/ Skillbox Media</em><p>Для сравнения вы можете попробовать сделать слайдер на чистом HTML, CSS и JavaScript - скачать все изображения на компьютер и затем добавить их вручную. Это полезная практика, которая позволит оценить удобство использования CDN во фронтенд-разработке.</p>

50 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>