WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Разница между async и defer у тега script

Подключаемые скрипты (JavaScript) блокирует загрузку HTML кода. Когда браузер (парсер) доходит до тега <script> он останавливается, чтобы загрузить контент файла и выполнить его код, и только после этого продолжает парсинг HTML.

Такое поведение может тормозить отображение HTML, когда на странице загружаются много файлов JavaScript. Часто код этих файлов не нужен, чтобы показать HTML страницы. Именно поэтому рекомендуется подключать скрипты в конце страницы. Однако эту рекомендацию не всегда можно соблюсти и для таких случаев есть другие способы не блокировать отрисовку HTML.

У элемента <script> есть два атрибута, async и defer, которые могут дать нам больше контроля над тем, как и когда файл загружаются и выполняются.

Обычное выполнение

<html>
<head> ... </head>
<body>
	...
	<script src="script.js">
	....
</body>
</html>

Атрибут async

<script async src="script.js">

Атрибут defer

<script defer src="script.js">

Где и что использовать?

Зависит от ситуации. Рассмотрим несколько вопросов на эту тему.

Где находится элемент <script>?

Если файл JavaScript находится непосредственно перед закрывающим тегом </body>, использовать async или defer не имеет смысла поскольку к этому моменту парсер уже проанализировал весь HTML код.

Является ли скрипт самодостаточным?

Для файлов (скриптов), которые не нужны для работы других скриптов и сами не имеют зависимостей от других скриптов, атрибут async особенно полезен. Поскольку в этом случае все равно, в какой именно момент выполняется скрипт, асинхронная загрузка является наиболее подходящим вариантом.

Нужен ли полностью загруженный DOM для работы скрипта?

Если это необходимо, то использование async уместно только в случае если скрипт рассчитан на асинхронную загрузку - т.е. он ждет события пока загрузиться DOM и только потом начинает свою работу.

Или можно использовать атрибут defer. В этом случае размещать вызов script можно в любом месте HTML.

Маленький ли скрипт?

Если скрипт относительно мал и от него зависят или он зависит от других скриптов, то его можно встроить прямо в HTML (подключить inline).

Поддержка браузерами 97%

Добавление атрибутов defer или async в WordPress

Штатных способов сделать это нет, поэтому будем пользоваться хуком script_loader_tag:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){

	// подключаем скрипт
	wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js' );

	// Добавляем атрибут defer к скрипту с id `my-script`
	add_filter( 'script_loader_tag', 'change_my_script', 10, 3 );
	function change_my_script( $tag, $handle, $src ){

		if( 'my-script' === $handle ){
			// return str_replace( ' src', ' async src', $tag );
			return str_replace( ' src', ' defer src', $tag );
		}

		return $tag;
	}
}
Комментариев нет
    Здравствуйте, !     Войти . Зарегистрироваться