Как вы, наверное, знаете, есть несколько атрибутов для включения тега JavaScript в ваш браузер, и каждый из них влияет на способ получения файла JS (что в основном означает загрузку, а затем выполнение).

В Html мы можем написать тег script в заголовке документа или, как правило, в конце тела.

Голова:

Когда пользователь загружает страницу и получает html. html начинает анализироваться браузером (анализ Html в основном означает построение дерева DOM из элементов HTML), затем в определенный момент он находит тег сценария и начинает его извлекать, а затем выполнять. поэтому на это время парсинг HTML будет остановлен для загрузки и выполнения JS-скрипта и только после этого парсинг HTML будет продолжен и наконец мы получим DomContentLoaded

Анализ HTML → ожидание ( [Fetch Script] [Execute]) … → Завершение анализа HTML[DomContentLoaded]

И, очевидно, это совсем не идеально, и перед созданием дерева Dom извлекается Js-скрипт.

Но что, если мы поместим его в конец тела?

в этом состоянии сначала анализируется весь HTML, а затем доходит до тега script, и он извлекается на последнем шаге, а затем происходит событие DomContentLoaded

Разбор HTML → [Fetch Script] [Execute] [DomContentLoaded]

Также кажется, что это действительно лучше, чем первый метод. С другой стороны, это не самая эффективная функция, и на самом деле есть две другие новые функции, которые могут помочь нам лучше управлять скриптами.

Первый, о котором я расскажу, относится к функции ASYNC:

В соответствии с этой функцией скрипт будет загружен одновременно с парсингом HTML, а затем сразу же после этого скрипт будет выполнен:

[Выборка + Анализ HTML + Сценарий] → ожидание [ Выполнить ]… → Завершение анализа HTML [DomContentLoaded]

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

[Выборка + парсинг HTML[DomContentLoaded] + скрипт] → [Выполнить]

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

Последний метод, который считается наиболее эффективным, называется DEFER.

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

[Выборка + парсинг HTML + скрипт] →[ Выполнить ] →[DomContetntLoaded]

А также гарантирует, что все скрипты будут запускаться соответственно

В качестве последнего пункта следует отметить, что старые браузеры не поддерживают функции ASYNC и DEFER.