Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 Слева: порядок загрузки элементов заглавной страницы skillbox.ru<p>Любые скрипты вставляются в <a>HTML</a>с помощью тега<em><script></em>. Между открывающим и закрывающим тегом вставляем или сам код скрипта, или ссылку на внешний файл.</p>

2 <p>Чтобы встроить<a>JavaScript</a>в HTML, открываем файл HTML в любом текстовом редакторе, добавляем теги<em><script>...</script></em>, между ними пишем код программы. Затем сохраняем файл (например,<em>skillbox.htm</em>).</p>

3 <html> <script> alert("Привет, Skillbox") </script> </html><p>Во многих случаях лучше загружать скрипт из внешнего файла. Такой вариант используется, если мы загружаем какой-то стандартный файл .js из внешнего источника, например библиотеку jQuery. Или если этот "скрипт" на самом деле представляет большое веб-приложение, которое разрабатывается отдельно. Загрузка из внешнего файла всегда лучше, если наша программа JavaScript нужна нескольким веб-страницам.</p>

4 <p>Для подключения внешнего файла мы опять используем открывающий и закрывающий теги<em><script>...</script></em>, но между ними указываем не код программы, а путь к файлу с расширением .js, где записан этот код программы.</p>

5 <p>В нашем примере программу alert("Привет, Skillbox") мы сохраняем в отдельный файл<em>skill.js</em>, а относительный или абсолютный путь к нему прописываем между тегами<em><script>...</script></em>с атрибутом src="".</p>

6 <script src="/js/skill.js"></script><p>или</p>

7 <script src="https://skillbox.ru/js/skill.js"></script><p>Результат выполнения скрипта, загруженного таким образом, не отличается от выполнения кода, прописанного непосредственно в странице HTML.</p>

8 <p>На странице можно указать любое количество файлов .js, которые будут скачаны и запущены на выполнение. Теги вставляются в произвольные места страницы или перечисляются друг за другом:</p>

9 <script src="https://skillbox.ru/skill.js"></script> <script src="https://www.google-analytics.com/analytics.js"></script><p>В одном теге<em><script></em>нельзя одновременно и подключить внешний скрипт, и указать код. Придется выбрать что-то одно.</p>

10 <p>По <a>статистике HTTP Archive</a>, в июне 2018 года средний размер веб-страницы в интернете составил 1720 КБ. За восемь лет он вырос в 3,7 раза. Есть несколько причин такого "ожирения" страниц, в том числе увеличение размера графических изображений (с 226 до 890 КБ, в 3,8 раза). Но в относительных цифрах за восьмилетний период сильнее всего выросла доля JavaScript, то есть внешних файлов .js, которые загружаются вместе со страницей HTML. Их объем увеличился с 89 до 371 КБ, то есть в 4,18 раза!</p>

11 <p>К сожалению, именно скрипты становятся главной причиной подтормаживаний. Пользователю приходится несколько секунд ждать загрузки страницы, а потом она некоторое время не реагирует на ввод с тачскрина, движения мышью или нажатия с клавиатуры. Когда начинает реагировать, то перегруженная скриптами страница может двигаться по экрану рывками при прокрутке и продолжит подтормаживать, при этом максимально загружая процессор.</p>

12 <p>Дело в том, что загрузка скриптов влияет на самую главную метрику производительности: время до появления интерактивности (<a>Time to Interactive</a>). Например, изображения на странице практически не влияют на эту метрику, потому что они не блокируют загрузку элементов интерфейса, а вот скрипты выполняются в основном потоке, то есть находятся на <a>критичном пути рендеринга</a>. Поэтому ни в коем случае нельзя безгранично раздувать количество скриптов на странице. Если пользователь с настольного компьютера или ноутбука еще кое-как загрузит страницу, то пользователь на смартфоне может ее не дождаться. Через десять секунд ожидания он просто закроет страницу.</p>

13 <p>При добавлении скриптов на страницу нужно помнить, что у каждой страницы есть бюджет по времени и по объему скриптов. Для нормальной загрузки страницы на мобильных устройствах специалисты рекомендуют удерживать бюджет страницы в пределах<a>200 килобайт сжатых скриптов</a>. Это разархивируется более чем в 1 мегабайт кода, который браузеру нужно разобрать и выполнить.</p>

14 <p>Браузер отображает страницу сверху вниз, создавая DOM-элементы по мере продвижения по HTML-документу. Если мы помещаем теги<em><script></em>в конце, то файлы JavaScript будут открыты одними из последних и не слишком повлияют на критичный путь рендеринга. И наоборот, если разместить тег<em><script></em>в начале страницы, то по стандарту браузер обязан сначала выполнить этот скрипт, а уже потом показать оставшуюся часть страницы. Это одна из главных причин подтормаживаний при загрузке страниц.</p>

15 <p>Поэтому есть смысл переносить в конец страницы ссылки на некритичные скрипты, такие как счетчики, скрипты аналитики и реклама.</p>

16 <p>Более грамотный способ решить проблему с загрузкой "медленных" внешних скриптов - асинхронная загрузка с помощью атрибута async. Если с тегом<em><script></em>указан такой атрибут, то браузер не будет ждать загрузки и выполнения этого скрипта, прежде чем показать оставшуюся часть страницы.</p>

17 <script src="https://skillbox.ru/skill.js" async></script> <script src="https://www.google-analytics.com/analytics.js" async></script><p>Кроме<em>async</em>, существует атрибут<em>defer</em>. Он тоже обеспечивает асинхронную загрузку, но при этом гарантирует, что скрипты будут выполняться в том порядке, в каком указаны на странице, а также ждет обработки всего HTML в браузере. Это важно, если скрипты зависят друг от друга и от контента HTML-страницы.</p>

18 <script src="https://skillbox.ru/skill.js" defer></script> <script src="https://www.google-analytics.com/analytics.js" defer></script><p>Мобильные и десктопные устройства при загрузке веб-страниц<a>кардинально отличаются по производительности</a>. Но современные сайты часто создаются с адаптивным дизайном, рассчитанным на загрузку как в десктопных, так и в мобильных браузерах. При расчете бюджета страницы желательно ориентироваться на среднее устройство под операционной системой Android. По статистике, это смартфон стоимостью примерно 200 долларов, который работает в медленной сети 3G с временем приема-передачи пакета 400 миллисекунд и пропускной способностью канала 400 кбит/с.</p>

19 <p>Существует универсальный инструмент<a>WebPageTest</a>, который тестирует скорость загрузки страниц в зависимости от параметров связи. Так, на странице<a>webpagetest.org/easy</a>тестируется именно указанная конфигурация с медленным 3G, типичная для мобильных пользователей. Профиль Moto G4 близок к среднему абонентскому устройству.</p>

20 Порядок выполнения скриптов и загрузки остальных элементов главной страницы skillbox.ru. Зеленая вертикальная черта соответствует ключевому показателю TTI, то есть моменту появления интерактивности:10 секунд с момента начала загрузки на медленном 3G. Полная загрузка всех элементов занимает<a>57,7 с</a><a>(полная версия скриншота</a>)<p>Многие разработчики делают типичную ошибку, когда проверяют скорость загрузки страницы и производительность сайта на своем топовом айфоне в быстром городском соединении. Конечно, в офисе у всех сайт загружается идеально, и у начальства тоже. Но у большинства пользователей нет таких условий.</p>

21 <p>По мере работы с JavaScript вы узнаете много возможностей этого языка программирования. Конечно, есть соблазн применить на практике все знания. Но всегда следует помнить о бюджете и максимальном времени, которое люди на простеньких Android-смартфонах готовы ждать загрузки вашей страницы. Эти знания обязательно придут с опытом.</p>