Подключение файла скрипта

В рабочем проекте обычно более одного файла с кодом JavaScript.

В любой проекте всегда самым главным является файл index.html. Именно его ищет, видит и считывает браузер. Именно в этот файл поключаются все другие файлы стилей и файлы скриптов.

Вспомним базовую разметку файла index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

А теперь вспомним, как к нему подключаются файлы стилей (CSS) - внутри тега head.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
</body>
</html>

Важно помнить, что файл скрипта - то есть файл с расширением .js всегда подключается после всей разметки в самый конец тега body - перед его закрывающим тегом.

Как показано на примере:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <section>
      <h2>My section</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, excepturi.
      </p>
    </section>
    <script src="./index.js"></script>
  </body>
</html>

Если у нас несколько файлов с .js, подключаем их по отдельности, в той последовательности, как они должны работать.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <section>
      <h2>My section</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, excepturi.
      </p>
    </section>
    <script src="./index.js"></script>
    <script src="./modal.js"></script>
    <script src="./burger-menu.js"></script>
  </body>
</html>

Подключение скриптов

Загрузка и выполнение скрипта указанного в теге <script> без каких-либо атрибутов, блокируют обработку HTML-документа и построение DOM. Это проблема.

<script src="path-to-script.js"></script>

Когда анализатор встречает такой тег, обработка HTML-документа приостанавливается и начинается загрузка файла скрипта указанного в атрибуте src. После загрузки скрипт выполняется, и только потом возобновляется обработка HTML. Это называется «блокирующий» скрипт.

Атрибуты defer и async были введены чтобы дать разработчикам возможность лучше контролировать как загружать скрипты и когда именно их выполнять.

Атрибут `defer`

<script defer src="path-to-script.js"></script>

Атрибут defer указывает браузеру загружать файл скрипта в фоновом режиме, паралельно обработке HTML-документа и построению DOM. Скрипт будет выполнен только после того как HTML-документ обработан, а DOM построен. Такие скрипты не блокируют построение DOM-дерева и гарантированно выполняются в том порядке, в котором указаны в HTML-документе.

Атрибут `async`

<script async src="path-to-script.js"></script>

Загрузка скрипта с атрибутом async не блокирует построение DOM, но он выполняется сразу после загрузки. Это значит, что такие скрипты могут заблокировать построение DOM, и выполняются в произвольном порядке.

PreviousЧто такое JavaScript?NextКонсоль разработчика и базовые действия

Last updated 3 years ago

hashtagПодключение скриптов

hashtagАтрибут defer​arrow-up-right

hashtagАтрибут async​arrow-up-right

Подключение скриптов

Атрибут `defer`

Атрибут `async`