Comments 21
Главный совет не используйте js если можно обойтись без него
Достаточно понимать что:
У браузера последовательный рендер
JS однопоточный
Больше проблем как таковых нет
Я бы ещё добавил, что событие window.onload - ключевое при загрузке страницы и всё что можно вызывать в нём или сразу после него, лучше так и сделать.
Ключевое — DOMContentLoaded, обычно нет смысла ждать завершения загрузки всяких маловажных картинок
В DOMContentLoaded обычно вызываются инициализирующие скрипты. Например тот же jQuery(document).ready это событие DOMContentLoaded. Следовательно, если вы подключите какой-нибудь тяжеловесный картографический сервис, то он может отложить инициализацию плагина слайдера. Поэтому все сторонние сервисы, если они не на первом экране прокрутки расположены, нужно подключать именно в window.onload.
Есть ещё сторонние сервисы, вроде систем аналитики, каптч и карт. Они блокируют загрузку, если их неправильно вызывать.
Вроде как все системы аналитики хотят загружаться сразу чтоб отслеживать больше, да можно асинхронно чуть позже загрузить но это все такое
Они так пишут в своей документации. Но я читал об этом обсуждения и все сходятся во мнении что подключать рано их нет смысла. Единственное имеет смысл яндекс метрику подключать сразу, из-за её инструмента вебвизор, чтобы все действия пользователя успеть записать.
Все данные которые используют счётчики берутся из API браузера. Поведенческие данные, такие как скрол страницы у гугл аналитикс не обязательно прям на пол секунды раньше собирать.
Системы авторизации как VK ID или Yandex ID
Требуется пример в виде картинки
Пример, который вы требуете, что должен проиллюстрировать? Системы авторизации надо подключать во время открытия всплывающего окна авторизации. Вот нажал пользователь на кнопку "Войти" в этот момент всплывает форма с вводом логина и пароля, а так же подгружаются сервисы авторизации. Пользователи пользуются формой авторизации на сайте с частотой меньше 0.5% и подгружать их сразу и на каждой странице - нерентабельно.
Это очень простой запрос, я не знаю, как его ещё проще сформулировать.
Ответь на этот комментарий картинкой, на которой отображен(-ы) системы авторизации, указанные выше
Пожалуй, ещё проще уже невозможно.
Просто запрос действительно настолько простой. Сервисы популярные и встречаются на каждом втором сайте. Поэтому подумал, что я неправильно понял.
Вот документация яндекс и ВК. Вот такие скрипты надо подгружать только по требованию, например когда открывается всплывающее окно авторизации.
Это не авторизация. Это аутентификация. Авторизация — это про «принципалу такому-то разрешается (с)делать это, это и это». Например, вход на сайт через ЕСИА (госуслуги) после экрана аутентификации показывает второй экран, мол, «сайт такой-то хочет получить доступ к информации о паспортных данных, номерах телефонов, разрешить?». Вот этот второй экран и есть авторизация.
Поэтому скрипты надо подключать перед закрывающим тегом , а не в секции .
Тут, похоже, парсер теги съел.
Если это про подключение скриптов перед закрывающим <body>, то уж сильно дедовский метод. Лучше таки подключать их в <head>, но с атрибутом defer и после стилей.
Так они пораньше начнут потихоньку грузиться по сети с приоритетом Low не дожидаясь того, как весь ответ html долетит целиком
Спасибо. Опечатку исправил.
Если загружать скрипты с аттрибутомdefer то они всё равно будут откладывать загрузку картинок, пускай и меньше. Плюс браузер паралельно может загружать только 6-8 файлов. Если скриптов много, то их загрузка заблокирует загрузку картинок.
Размещая скрипты перед </body> , мы управляем очередью загрузки скриптов. Метод дедовский, но альтернатив ему нет.
Может быть, это было актуально для HTTP/1.1, но с HTTP/2 браузер может загружать не меньше сотни ресурсов за раз, при этом у каждого запроса внутри коннекции есть приоритет.
Дефёрнутые скрипты грузятся с приоритетом Low
Стили — Highest
Картинки с Low пока не попадут во вьюпорт, после чего их приоритет динамически повышается до High.
Полная таблица тут: https://web.dev/articles/fetch-priority
Поэтому можно сильно не переживать, что кто-то у кого-то будет сильно канал отъедать. К тому же, через fetchpriority можно приоритет подтюнить. Например, если заведомо известно, что одна конкретная картинка будет показываться на первом экране, не грех ей поставить fetchpriority=high
Управлять приоритетом выставляя атрибуты defer и fetchpriority теоретически можно. Но сформулировать какую-то простую и универсальную методику я не могу. Помещение скриптов в конец страницы фактически то же самое управление приоритетом загрузки. Оно интуитивно понятно и воспроизводимо даже начинающими кодерами в проектах любого уровня легаси бардака.
Defer и fetchpriority скорее подходят для тонкой поднастройки очереди загрузки при решении узких мест производительности, нежели для массового применения. При этом уже есть <link rel="prefetch"> и <img loading="lazy">. То есть, fetchpriority - не решает какую-то новую задачу, а является новой надстройкой. Из хорошего fetchpriority реализует новую парадигму мышления в вопросах очерёдности загрузки. Раньше очерёдность была привязана к порядку объявления объектов на странице, а сейчас к системе приоритетов, которой можно вручную управлять, выставляя атрибут fetchpriority.
За ссылку на документацию по приоритету загрузки - огромное спасибо! Уже произвёл несколько тестов, теперь буду думать, как применять эту технологию на практике и доносить её до массового кодера. Прям реально полезный материал для размышлений.
Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта