Как вы, наверное, знаете, есть несколько атрибутов для включения тега 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.