for(var і = 1; і <= 10; і++) { // Вывести 10 строк
document. write("<trxtd>" + і + "</tdxtd>" + factorial(i) + "</td></tr>");
}
document.write("</table>”); // Конец таблицы
document.write("Generated at " + new Date); // Вывести время
</script>
Когда сценарий передает текст методу
document.write,
этот текст добавляется во входной поток документа, и механизм синтаксического анализа разметки HTML действует так, как если бы элемент
<script>
был замещен этим текстом. Использование метода
document.write
более не считается хорошим стилем программирования, но его применение по-прежнему возможно (раздел 15.10.2), и этот факт имеет важное следствие. Когда механизм синтаксического анализа разметки HTML встречает элемент
<script>,
он должен, по умолчанию, выполнить сценарий, прежде чем продолжить разбор и отображение документа. Это не является проблемой для встроенных сценариев, но если сценарий находится во внешнем файле, на который ссылается атрибут
src
, это означает, что часть документа, следующая за сценарием, не появится в окне броузера, пока сценарий не будет загружен и выполнен.
Такой синхронный, или блокирующий, порядок выполнения действует только по умолчанию. Тег
<script>
может иметь атрибуты
defer
и
async
, которые (в броузерах, поддерживающих их) определяют иной порядок выполнения сценариев. Это логические атрибуты - они не имеют значения; они просто должны присутствовать в теге
<script>.
Согласно спецификации HTML5, эти атрибуты принимаются во внимание, только когда используются вместе с атрибутом
src
, однако некоторые броузеры могут поддерживать атрибут
defer
и для встроенных сценариев:
<script defer src="deferred.js"></script>
<script async src="async.js"></script>
Оба атрибута,
defer
и
async
, сообщают броузеру, что данный сценарий не использует метод
document.write
и не генерирует содержимое документа, и что броузер может продолжать разбор и отображение документа, пока сценарий загружается. Атрибут
defer
заставляет броузер отложить выполнение сценария до момента, когда документ будет загружен, проанализирован и станет готов к выполнению операций. Атрибут
async
заставляет броузер выполнить сценарий, как только это станет возможно, но не блокирует разбор документа на время загрузки сценария. Если тег
<script>
имеет оба атрибута, броузер, поддерживающий оба этих атрибута, отдаст предпочтение атрибуту
async
и проигнорирует атрибут
defer
.
Обратите внимание, что отложенные сценарии выполняются в порядке их следования в документе. Асинхронные сценарии выполняются сразу же, как только будут загружены, т. е. они могут выполняться в произвольном порядке.
На момент написания этих строк атрибуты
async
и
defer
поддерживались не всеми броузерами, поэтому их следует рассматривать лишь как подсказки для оптимизации: веб-страницы должны проектироваться так, чтобы они продолжали корректно работать, даже если отложенные и асинхронные сценарии выполняются броузером синхронно.
Имеется возможность загружать и выполнять сценарии асинхронно, даже если броузер не поддерживает атрибут
async
, для чего достаточно динамически создать элемент
<script>
и вставить его в документ. Это действие реализует функция
loadasync
, представленная в примере 13.4. Используемые ею приемы описываются в главе 15.
Пример 13.4. Асинхронная загрузка и выполнение сценария
// Асинхронная загрузка сценария из указанного URL-адреса и его выполнение
function loadasync(url) {
var head = document.getElementsByTagName("head")[0]; // Отыскать <head>
var s = document.createElement("script"); // Создать элемент <script>
s.src = url; // Установить атрибут src
head.appendChild(s); // Вставить <script> в <head>
}
Примечательно, что данная функция
loadasync
загружает сценарии динамически - сценарии, не включенные в веб-страницу, и на которые отсутствуют статические ссылки из веб-страницы, загружаются в документ и становятся частью выполняемой JavaScript-программы.
13.3.2. Выполнение, управляемое событиями
Древняя JavaScript-программа, представленная в примере 13.3, является синхронной: она запускается на выполнение в процессе загрузки страницы, производит вывод и завершается. Такие программы редко используются в наши дни. Программы, которые пишутся в настоящее время, регистрируют функции обработчиков событий. Эти функции вызываются асинхронно, по событиям, для обработки которых они были зарегистрированы. Веб-приложения, в которых требуется реализовать поддержку горячих комбинаций клавиш для выполнения типичных операций, могут, например, регистрировать обработчики событий нажатия клавиш. Даже неинтерактивные программы используют события. Представьте, что требуется написать программу, которая должна проанализировать структуру документа и автоматически сгенерировать оглавление. В этом случае не требуется обрабатывать события, возникающие в результате действий пользователя, однако программа все же должна зарегистрировать обработчик события
onload
, чтобы поймать момент, когда закончится загрузка документа и он будет готов к созданию оглавления.