Async, defer и без них (конспект)

Async выполняется в любое время, но после Defer

Defer выполняются первыми, перед Async в том порядке, в котором указаны

Async и Defer выполняются после загрузки HTML и не блокируют рендеринг

Без Async и Defer выполняется, как только интерпритатор дошёл до строки с подключением такого файла, или блоком встроенного <script></script>, при этом задерживают рендер, всё что написано в HTML после них.

Применение

Async применяется для добавления на страницу сторонних скриптов (счётчиков, рекламы), так как незавесимы от нашего кода, и наш код от их, хотя... )

Defer для скриптов которомы нужен доступ ко всему DOM и (или) важен их порядок выполнения.

Динамические скрипты

let script = document.createElement('script');

script.src = "/article/script-async-defer/long.js";

document.body.append(script); // (*)

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

Такое поведение можно выключить - тогда они будут работать как обычные скрипты или как defer - по порядку

let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
 
script.async = false;
 
document.body.append(script);

Пример функции

function loadScript(src) {
 
  let script = document.createElement("script");
  script.src = src;
  script.async = false;
  document.body.append(script);
 
}
 
 
// long.js запускается первым, так как async=false
loadScript("/article/script-async-defer/long.js");
loadScript("/article/script-async-defer/small.js");

Динамическое добавление скриптов от Google

jQuery:

$(window).on("load", function ()){

  $(".body").append("<script src='script'>")
}

JS ванильный:

window.addEventListene ("load", function () {
 
  const script = document.createElement("script");
  script.src = "script.js";
  document.body.appendcChild (script);
})

Ссылки

https://learn.javascript.ru/script-async-defer