Разработка веб-приложений: учебное пособие

4. Основы JavaScript

4.7. Асинхронные сценарии

В HTML 5 для элемента <script> представлен атрибут async, который похож на атрибут defer в том смысле, что он тоже изменяет способ обработки сценария. Он также применяется только к внешним сценариям и указывает браузеру немедленно начать загрузку файла, но для сценариев с атрибутом async не гарантируется выполнение в порядке их добавления, например:

<!DOCTYPE  html>

<html>

<head>

<title>Пример HTML-страницы</title>

<script  type="text/javascript" async src="examplel.js"></script>

<script  type="text/javascript" async src="example2.js"></script>

</head>

<body>

<!--  контент -->

</body>

</html>

Здесь второй сценарий может быть выполнен перед первым, поэтому важно, чтобы между ними не было зависимостей. Атрибут async используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.

В XHTML-документах указывайте атрибут async как async= "async".

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

Удобство сопровождения. JavaScript-код, разбросанный по многим HTML-страницам, трудно сопровождать. Гораздо проще создать один каталог для всех JavaScript-файлов, чтобы разработчики могли редактировать код независимо от разметки, в которой он используется.
Кэширование. Браузеры кэшируют все связанные внешние JavaScript-файлы, и если в двух страницах используется один файл, он загружается только один раз, что ускоряет загрузку страниц.
Готовность к будущему. При включении сценариев из внешних файлов не нужно использовать упомянутые ранее приемы с комментариями и XHTML-кодом. Синтаксис включения в HTML и XHTML внешних файлов одинаков.