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

4. Основы JavaScript

4.5. Расположение тегов

Все элементы <script> в коде страницы традиционно размещались внутри элемента <head>, как в следующем примере HTML-страницы:

<!DOCTYPE  html>
  
<html>
  
<head>
  
<title>Пример  HTML-страницы</title>
  
<script type="text/javascript" src="examplel.js"></script>
  
<script type="text/javascript" src="example2.js"></script>
  
</head>
  
<body>
  
<!--  контент -->
  
</body>
 
</html>

Такой формат использовался во многом для того, чтобы ссылки на внешние CSS- и JavaScript-файлы находились в одном месте. Однако подобный формат имеет существенный недостаток: загрузка, синтаксический анализ и интерпретация всех сценариев должны быть завершены до начала визуализации страницы (визуализация начинается, когда браузер получает открывающий тег <body>). Если на странице используется много JavaScript-кода, это может приводить к длительным задержкам, в течение которых пользователь видит пустое окно браузера. Поэтому в современных веб-приложениях все ссылки на JavaScript-сценарии обычно указываются в элементе <body> после контента страницы:

<!DOCTYPE  html>
  
<html>
 
<head>
 
<title>Пример HTML-страницы</title>
 
</head>
 
<body>

<!--  контент -->
 
<script type=“text/javascript" src="examplel.js"></script>
 
<script type="text/javascript" src="example2.js"></script>
 
</body>
  
</html>

При таком подходе страница полностью визуализируется в браузере до обработки JavaScript-кода. Для пользователей это предпочтительнее, потому что контент отображается раньше.