Народ, всем привет. Сегодня мы поговорим про скрипты, время и место, когда их нужно подключать. Если вы думаете, что это касается только программистов, то это не совсем так. Да, человеку, который пишет сайт и решил подключить скрипты при помощи всем известного тега <script>, следует понимать, как он работает, как правильно загружается страница, в какой последовательности и все такое прочее. А вот заказчику нужно понимать, что спросить со своего программиста, ведь подключение скрипта напрямую коррелирует с загрузкой самой страницы, и потерю клиента от «разгильдяйства» разработчика.
Для начала нужно понять, что сама по себе страница грузится постепенно, как и многие прочие языки программирования или разметки, в данном случае. Простыми словами, когда браузер считывает код html- разметки, он читает его сверху вниз и выполняет команды последовательно, тег за тегом. Что H1 (заголовок), что img – картинка, что тэu <script> для браузера все едино. И при этом он каждый раз ждет загрузки и выполнения предыдущей команды. Поэтому, что находится выше, то браузер и нарисует в первую очередь (есть даже специальные команды и css свойства, чтобы картинки вначале грузились маленькие и в плохом качестве, а уже потом подгружались большие). Но об этом как-нибудь в другой раз.
Соответственно, если у вас на странице есть большой скрипт и вы загрузили его на вашу страницу перед всем остальным, то браузер будет просто ждать выполнения этого скрипта. Раньше довольно часто скрипты писали в тэге <head>, и они загружались в самом начале, и только потом начиналось отрисовывание всего сайта. Сейчас же принято не только подключать скрипты в тэге <body>, но и делать это в самом конце, перед закрывающим тэгом. Именно поэтому браузер в начале отрисует всю страницу, а уже потом начнет запускать скрипты, визуализацию, какие-то внутренние процессы или анимацию.
Кстати, Вам может быть это интересно:
Да, иногда это не работает, и нужно специально подключить скрипт вначале страницы (например, он служит для понимания, что отображать на станице) или еще по каким-то причинам, когда он влияет на отображаемый контент. Но, тут также можно выйти из ситуации:
- подгрузить в начале какой-то «базовый» шаблон или каркас (типа загрузки или скелетона) и только потом на их месте уже подгружать нужный контент через скрипты (так делают чаще всего)
- разбивать скрипты на разные файлы, но это и так должно быть заложено в вашей парадигме работы, просто как правило хорошего тона. Но если вы до сих пор все скрипты лепите одной простыней, то самые важные, необходимые для загрузки страницы, просто выделить в отдельный файл и напишите его в <head>
Это раньше, когда сайты были простыми, в основном текстовыми, с небольшим количеством анимации или вообще без нее, скрипты подключали в самом начале. Сейчас же каждый сайт — это огромное приложения (ну в большинстве случаев), поменялись технологии, протоколы безопасности, все такое прочее. В общем, любой скрипт, даже в пару срок, может работать долго, отправлять запросы на сервер, и если интернет медленный, то пользователь увидит белый лист вместо сайта. И объясняй ему потом, что это скрипты необходимые грузились и сайт работал, просто это вы пока ничего не видите. Обычно пользователь просто уходит.
А вот если вы ему отрисуете сайт, или хотя бы костяк (шаблон), ну или на крайний случай поставите анимацию загрузки – это уже будет лучше, и пользователь будет понимать, что что-то происходит и процесс идет. Но помните, что у вас есть секунды 2, дальше он также перейдет к вашим конкурентам.
Кстати, не могу не сказать о варианте с асинхронной загрузкой. Не все знают (и еще меньше пользуются), что у тега script есть два свойства: defer и async.
<script src="script.js" defer></script>
Defer – после того, как браузер наткнётся на скрипт, он начнет его загружать параллельно странице, но при этом не выполнятся (загрузка скрипта и его выполнение – разные вещи). Он будет ждать окончания всех других процессов (загрузки основной страницы) и только потом выполнит скрипт. Если простыми словами, встретив выражение 2+2, он его посчитает, найдет ответ 4, сделает это параллельно загрузки всего сайта, и только в конце, после всех операций, отдаст ответ в 4 (и загрузит его ан сайт, например).
<script src="script.js" async></script>
Async – также выполняется асинхронно, то есть параллельно загрузки страницы, но ответ он выдаст также параллельно, то есть не дожидаясь окончания загрузки станицы.
Оба варианта имеют свои принципы и сферу применения. Если вам нужно, чтобы результат скрипта отразился на странице (какие-то вычисления, таблицы, список пользователей, контент и т.д.) вы можете при помощи deferа произвести все расчеты или запросы на сервер пока грузится страница, а результат уже выдать в самом конце. Asinc же вам поможет, если результат скрипта ни на что не влияет, или например, нужен для анимации или результат не выводится, а нужен лишь для быстрого взаимодействия пользователя со страницей. Но при этом важно понимать, чем они отличаются, т.к. asinc например может повлиять на правильность отображения страницы (если он влияет на контент).
