JS Defer: Оптимизация загрузки и выполнения JavaScript

JavaScript defer - это атрибут тега script, который указывает браузеру отложить выполнение скрипта до тех пор, пока веб-страница полностью не загрузится. Это означает, что скрипт будет загружаться параллельно с другими ресурсами страницы, но он не будет выполняться, пока вся страница не будет полностью загружена.

Атрибут defer предоставляет следующие преимущества:

1. Обеспечивает более быструю загрузку страницы: При использовании defer браузер не блокирует загрузку других ресурсов и не останавливает обработку HTML-документа для выполнения скрипта. Вместо этого он загружает скрипт параллельно с остальными ресурсами и выполняет его только после полной загрузки страницы. Это позволяет ускорить загрузку веб-страницы.

2. Правильное размещение скриптов: Если на странице есть несколько скриптов, они могут быть расположены в тегах script с атрибутом defer в порядке их зависимости друг от друга. В результате скрипты будут загружаться параллельно, но выполняться будут в том порядке, в котором они указаны в коде страницы. Это позволяет избежать проблем с зависимостью скриптов и упростить разработку.

Вот пример кода, иллюстрирующий использование атрибута defer:

html



  


  
Пример страницы с отложенным выполнением скрипта
  
  
  
  

В этом примере три скрипта (script1.js, script2.js и script3.js) загружаются параллельно при загрузке страницы, но выполняются в порядке их расположения в коде страницы.

Таким образом, использование атрибута defer позволяет ускорить загрузку страницы и облегчить организацию и выполнение скриптов на веб-странице.