JavaScript с нуля

Итак, какой подход использовать?

У нас есть два основных подхода, определяющих, как и где следует размещать код (рис. 10.4).

Рис. 10.4. Два основных подхода, используемых для работы с кодом JavaScript

Конечный выбор подхода зависит от ответа на следующий вопрос: «Планируется ли использование одного и того же кода в нескольких HTML-документах?»

Считывание и расположение сценариев в документе

Несколькими разделами ранее я описывал выполнения сценариев. Браузер считывает HTML-страницу, начиная сверху и построчно перемещаясь вниз. Когда он достигает тега script, то начинает выполнять содержащийся в нем код. Это выполнение также происходит построчно, начинаясь с верхней части. Все остальные возможные действия страницы на время этого выполнения приостанавливаются. Если тег script ссылается на внешний JS-файл, то прежде, чем начать выполнение этого файла, браузер его загрузит.

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

Если тег script окажется в верхней части документа, то на время его выполнения браузер заблокирует все остальное. В результате если вы начнете загружать большой файл сценария или будете выполнять сценарий, то пользователь сможет увидеть частично загруженную и не отвечающую HTML страницу. До тех пор пока у вас не возникнет реальной потребности в выполнении JavaScript до полного считывания документа, размещайте теги script в конце, как показано в большинстве предыдущих примеров. Есть и еще одно преимущество в расположении скриптов внизу страницы, но о нем я расскажу значительно позднее, когда мы будем говорить о DOM (объектная модель документа) и о том, что происходит в процессе загрузки страницы.