Ещё один вариант отложенной загрузки скриптов на jQuery/JavaScript
Если вы читаете эту статью, смею предположить, что вы, как и я в своё время, пытаетесь оптимизировать (ускорить загрузку страниц) сайт по рекомендациям Google PageSpeed Insights.
Что касается части, связанной с JavaScript, то формулировка рекомендаций в сервисе проверки скорости сайта (PageSpeed Insights) может быть следующей:
Устраните ресурсы, блокирующие отображение
Удалите неиспользуемый код JavaScript
Уменьшите влияние стороннего кода
Минимизируйте работу в основном потоке
Сократите время выполнения кода JavaScript
Предотвратите чрезмерную нагрузку на сетьВнутренние скрипты (те, что находятся на вашем сайте) можно оптимизировать путём изменения логики их работы, когда как внешние лишены такой возможности и для них есть три варианта развития событий: загрузить их к себе на сайт и далее проводить необходимые работы (подходит не для всех случаев, так как вы можете потерять необходимую актуальность файлов), оставить всё как есть или отложить загрузку таких скриптов до нужного вам времени.
С первыми двумя случаями всё понятно, третий – собственно то, ради чего мы здесь и собрались.
Что на своей практике и на разных сайтах я пробовал:
- Загрузку скриптов после полной загрузки страницы (формально ускоряет работу сайта, но сервис проверки всё также ругается на проблемы).
- Отложенную загрузку скриптов через некоторое время (тоже вариант, но функционал сайта привязывается ко времени, и посетителю придется ждать, чтобы его увидеть).
- Комбинированный вариант первого и второго (для того, чтобы время во втором варианте отсчитывалось только после полной загрузки).
- Атрибут defer (чтобы не тормозить отрисовку страницы).
- Загрузку скриптов после какого-то взаимодействия с сайтом.
По первым 4 вариантам, думаю, всё понятно, и, скорее всего, вы их пробовали сами (если нет – попробуйте, чтобы понять, в чём вся суть), а вот последний мне показался перспективным, и именно его я решил «доводить до ума».
Забегая вперёд, показываю, что у меня получилось на jQuery:
var event_status = false; // Статус события (ещё не произошло)
$(window).on("load", function() {
// Страница загрузилась полностью
$(window).one("mouseover click scroll", function() {
// Произошло нужное событие (mouseover, click или scroll) с объектом window
if(!event_status) {
// Если в первый раз
alert("Привет!");
event_status = true; // Статус события (произошло)
}
});
});и аналог на JavaScript, для общего развития:
var event_status = false; // Статус события (ещё не произошло)
window.addEventListener("load", function() {
// Страница загрузилась полностью
["mouseover", "click", "scroll"].forEach(function(event) {
window.addEventListener(event, function() {
// Произошло нужное событие (mouseover, click или scroll) с объектом window
if(!event_status) {
// Если в первый раз
alert("Привет!");
event_status = true; // Статус события (произошло)
}
}, {
once: true
});
});
});Что и как здесь устроено?
Мы ждём, когда страница загрузилась полностью (это раз). Далее проверяем, выполнил ли человек одно (любое) из указанных действий на всей странице (движение курсора, клик, прокрутка) (это два). И три: после того, как выполнил, запускаем (или подгружаем) необходимый нам код.
Думаю, здесь всё понятно. Таким образом, мы сокращаем время загрузки страницы, и иногда ощутимо.
Перечень необходимых условий (действий) вы задаёте сами, можете привязать их даже к конкретным элементам.
В каких случаях я использую данную конструкцию? Когда идёт работа с внешними скриптами (различными чатами/консультантами, счётчиками, виджетами социальных сетей, картами и пр.). То есть когда нет возможности повлиять на содержимое файла, но можно регулировать момент его вовлечения в работу сайта. При этом никто не запрещает использовать такой подход и для локальных скриптов.
