HTML-документ достаточно гибок, чтобы размещать тег scripts в любом месте. Однако наиболее предпочтительными способами включения JavaScript в файл HTML являются следующие:

  • Внутри секции ‹head›…‹/head›.
  • Внутри секции ‹body›…‹/body›.
  • JavaScript в нескольких разделах
  • JavaScript во внешнем файле
  • Обработка кода блокировки

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

JavaScript в разделе ‹head›…‹/head›

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

<html>
   <head>      
      <script type = "text/javascript">
            function sayHello() {
               alert("Hello World")
            }
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      <!-- output alert("Hello World") pops up-->
   </body>  
</html>

JavaScript в разделе ‹body›…‹/body›

Вариант использования размещения скриптов внутри тела заключается в создании динамического содержимого в теле, которое должно обновляться при анализе тега тела.

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
            document.write("Hello World")
      </script>
      <p>This is web page body </p> 
      <!-- output - page content is updated to Hello World-->
   </body>
</html>

JavaScript в нескольких разделах

В зависимости от ситуации мы можем разместить javascript в нескольких разделах. Но убедитесь, что javascript не содержит никаких блокирующих вычислений, чтобы мы могли быстро отображать контент.

<html>
   <head>
      <script type = "text/javascript">
            function sayHello() {
               alert("Hello World")
            }
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
            document.write("Hello World")
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

JavaScript во внешнем файле

По мере роста проекта мы можем получить много кода, поскольку это может стать потенциальной проблемой. Вот почему возможна экстернализация javascript Итак, мы можем иметь несколько файлов, которые в свою очередь имеют более простой и функциональный код.
Мы можем использовать те же теги скрипта для импорта внешнего файла, указав src и тип.

<!-- index.html -->
<html>
   <head>
      <script type = "text/javascript" src = "index.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>
//index.js
function sayHello() {
   alert("Hello World")
}

Обработка кода блокировки

В ситуации нам может понадобиться включить тяжелые вычисления в этом случае, когда браузер анализирует теги скрипта, он пытается его выполнить, поэтому он может заблокировать рендеринг. Рекомендуется использовать атрибуты async или defer в теге scripts, чтобы уменьшить блокировку рендеринга.

Что будут делать атрибуты —

async — для классических сценариев, если присутствует атрибут async, классический сценарий будет извлекаться параллельно с анализом и оцениваться, как только он будет доступен.

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

<!-- index.html -->
<html>
   <head>
      <script src = "index.js" async ></script>
      <!--
        we can use async or defer according to the situation
        <script src = "index.js" defer ></script>
        -->
   </head>
   
   <body>
      .......
   </body>
</html>
//index.js
function sayHello() {
   /* some heavy computation */
}

Если у нас есть код, который нельзя экстернализировать, мы можем попытаться выполнить код после того, как содержимое DOM будет проанализировано и готово.

<!-- index.html -->
<html>
   <head>
      <script src = "index.js" async >
        function doSomething() {
          console.info('DOM loaded');
          /* call heavy computing function */
        }
  
        if (document.readyState === 'loading') {  // Loading hasn't finished yet
          document.addEventListener('DOMContentLoaded', doSomething);
        } else {  // `DOMContentLoaded` has already fired
          doSomething();
        }
      </script>
   </head>
   <body>
      .......
   </body>
</html>

Справочник

https://www.tutorialspoint.com/javascript/javascript_placement.htm

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event