Видео: Отложенная загрузка изображений Lazy Load. Правильная оптимизация 2025
Одной из основных причин медленных веб-страниц является так называемый сценарий блокировки, Сценарий блокировки - это файл JavaScript, загрузка и выполнение которого блокирует загрузку веб-страницы. В экстремальных обстоятельствах браузер может загружать всю веб-страницу и показывать пустой экран в течение нескольких секунд или дольше, пока JavaScript загружается и анализируется. Поскольку веб-пользователям, как правило, быстро надоедает, этой ситуации следует избегать.
К счастью, существует несколько способов отложить загрузку и выполнение JavaScript и ускорить отображение веб-страниц.
Первый способ - использовать атрибут defer для элемента script. Вот как это выглядит:
Обратите внимание, что атрибут defer можно использовать только с внешними файлами JavaScript. Он не может применяться к блокам внутри документа.
Если присутствует, атрибут defer приведет к выполнению сценария после завершения разбора страницы.
Еще один способ отложить загрузку и выполнение скрипта - это метод, рекомендованный Google. Google рекомендует поместить следующий код в самую нижнюю часть вашей веб-страницы. Чтобы использовать его, вы, естественно, замените имя сценария образца (здесь, myscript. Js) своим собственным именем.
function downloadJSAtOnload () {var element = document. createElement ("сценарий"); элемент. src = "myscript. js"; документ. тело. appendChild (element);} if (window. addEventListener). addEventListener ("load", downloadJSAtOnload, false); else if (window. attachEvent). attachEvent ("onload", downloadJSAtOnload); иначе окно. onload = downloadJSAtOnload;
Еще одним атрибутом для поддержки JavaScript является атрибут async. Атрибут async является новым в HTML5. Вот как это выглядит:
Как и атрибут defer, атрибут async может использоваться только с внешними скриптами (где используется атрибут src). Если присутствует, атрибут async приведет к тому, что скрипт будет выполняться асинхронно с остальной частью страницы. Другими словами, сценарий будет выполняться одновременно с остальной частью страницы.
Какой бы метод вы ни выбрали, может повлиять на правильность работы остальной части JavaScript на вашей странице. Обязательно проверяйте все после выполнения отложенной загрузки. Выполнено правильно, отсрочка JavaScript может значительно сократить время ожидания ваших пользователей и сделать всех счастливее.
