belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

JavaScript >>>

                                            Учебник Задачник

1.4 Порядок выполнения внешних скриптов JavaScript

В общем случае по умолчанию все скрипты начинают выполняться последовательно один за другим, в порядке следования элементов 'script' в коде документа. И пока очередной скрипт выполнен не будет, содержимое тела документа, которое идет после текущего элемента 'script', отображено на странице не будет (см. пример 1.4.1). Загрузите код примера и затем попробуйте запустить его по несколько раз в каждом браузере, внимательно проследив за порядком выполнения скриптов! Первым всегда будет выполняться скрипт, который идет в исходном коде выше. Затем выполнится второй скрипт и в конце появится содержимое абзаца.

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Порядок выполнения внешних скриптов</title>
</head>
<body>
	
	<!-- Подключаем 1-й внешний файл со скриптами. -->
	<script src="file_1_4_1a.js"></script>
	
	<!-- Подключаем 2-й внешний файл со скриптами -->
	<script src="file_1_4_1b.js"></script>
	
	<p>Я - содержимое абзаца в теле документа.</p>
		
</body>
</html>

Пример 1.4.1. Порядок выполнения скриптов по умолчанию  

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

Опять же, загрузите код примера и затем попробуйте запустить его по несколько раз в каждом браузере, внимательно проследив за порядком выполнения скриптов! Поскольку размер первого скрипта из-за огромного количества комментариев значительно больше размера второго скрипта, он практически всегда будет загружаться дольше второго скрипта (посмотрите коды и размеры скриптов). Поэтому первым мы увидем окно с сообщением именно второго скрипта, несмотря на то, что он расположен в исходном коде ниже. Короче, кто первым загружается, тот первым и будет выполняться! Что касается порядка вывода содержимого страницы на экран (прорисовка страницы), то процесс зависит от браузера и конкретной ситуации. Так что полагаться стоит только на порядок выполнения самих скриптов.

Таким образом, благодаря атрибуту async, браузер будет продолжать разбор исходного кода, который идет после элемента 'script', и скрипты ниже будут загружаться и выполняться параллельно с загрузкой текущего скрипта. В итоге, первым мы увидим результат выполнения того скрипта, который быстрее полностью загрузится.

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Использование атрибута async</title>
</head>
<body>
	
	<!-- Подключаем 1-й внешний файл со скриптами. -->
	<script src="file_1_4_2a.js" async></script>
	
	<!-- Подключаем 2-й внешний файл со скриптами -->
	<script src="file_1_4_2b.js" async></script>
	
	<p>Я - содержимое абзаца в теле документа.</p>
		
</body>
</html>

Пример 1.4.2. Использование атрибута async  

Если необходимо, чтобы требуемые скрипты загружались и выполнялись одновременно (параллельно) с загрузкой страницы, но при этом порядок выполнения данных скриптов сохранялся, т.е. чтобы скрипты выполнялись в порядке появления соответствующих элементов 'script' в коде документа, то нужно указывать атрибут defer, который также не имеет значений и по умолчанию выключен. Так, если в примере 1.4.2 заменить атрибуты async на атрибуты defer, то первый скрипт будет всегда выполняться раньше несмотря на то, что загружается он дольше (см. пример 1.4.3).

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Использование атрибута defer</title>
</head>
<body>
	
	<!-- Подключаем 1-й внешний файл со скриптами. -->
	<script src="file_1_4_2a.js" defer></script>
	
	<!-- Подключаем 2-й внешний файл со скриптами -->
	<script src="file_1_4_2b.js" defer></script>
	
	<p>Я - содержимое абзаца в теле документа.</p>
		
</body>
</html>

Пример 1.4.3. Использование атрибута defer  

Использование атрибута defer целесообразно, например, в том случае, когда второй скрипт, который идет в исходном коде ниже, зависит от первого скрипта, который идет в исходном коде выше.

Атрибуты defer и async работают только с внешними скриптами, т.е. если указан атрибут src. Кроме того, если указаны оба атрибута, то предпочтение отдается атрибуту defer, соответственно, async игнорируется.

Контрольные вопросы и задания

  1. В чем заключается основное отличие при использовании атрибутов defer и async?

Словарь новых английских слов

asynchronously [ə'siɳkrənəsli] – асинхронно.
defer [dɪˈfəː] – откладывать, уступать.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх