defer, async и куда ставить скрипт

Браузер читает HTML сверху вниз и по ходу строит DOM. Встретив <script src="...">, он останавливается: разбор замирает, файл качается, код выполняется — и только потом парсер идёт дальше. Причина историческая: скрипт вправе дописать разметку через document.write, и браузер не знает заранее, что окажется в потоке.

Отсюда два неприятных следствия. Скрипт в <head> задерживает появление страницы: пока он не выполнится, пользователь смотрит на пустое место. И скрипт видит только ту разметку, что находится выше него — всего, что ниже, для него ещё не существует.

const box = document.getElementById("box");
box.append(document.createElement("p")); // разметка выше скрипта

const s = document.createElement("script");
s.textContent = `window.seen = document.querySelectorAll("#box p").length;`;
box.append(s);

box.append(document.createElement("p")); // разметка ниже скрипта

console.log(window.seen, document.querySelectorAll("#box p").length);

const app = document.getElementById("app");

console.log(app.querySelector("h1"));

app.innerHTML = `<h1>Привет</h1>`;

console.log(app.querySelector("h1").textContent);

defer разделяет две вещи, которые в обычном скрипте склеены: загрузку и выполнение. Файл начинает качаться сразу, но параллельно разбору — парсер не тормозит ни на миллисекунду. Выполнится код тогда, когда DOM целиком построен, но ещё до события DOMContentLoaded.

Порядок при этом сохраняется: два defer-скрипта выполнятся в том порядке, в каком стоят в разметке, даже если второй скачался первым. Это ровно то, что нужно библиотеке и зависящему от неё коду. Важная деталь: defer имеет смысл только вместе с src — у инлайнового скрипта атрибут просто игнорируется.

window.ran = false;

const s = document.createElement("script");
s.defer = true;
s.textContent = `window.ran = true;`;
document.getElementById("host").append(s);

console.log(window.ran);

// примерно в такой момент и оживает defer-скрипт
console.log(document.readyState !== "loading");
console.log(document.getElementById("text") !== null);

async тоже качает файл параллельно разбору, но выполняет его при первой возможности — как только файл приехал. Разбор при этом может прерваться на середине. Порядок в разметке не значит ничего: побеждает тот, кто раньше закончил загрузку.

Поэтому async годится ровно для одного класса файлов: самодостаточных, которым безразличны и другие скрипты, и состояние страницы, — счётчики, сбор ошибок, независимые виджеты. Библиотека и плагин к ней с async — это лотерея, которая выигрывается на быстрой машине разработчика и падает у пользователя.

const s = document.createElement("script");

console.log(s.async, s.defer);

s.defer = true;
console.log(s.async);

s.async = false;
console.log(s.async);

const order = [];
const load = (name, ms) => new Promise((done) => {
  setTimeout(() => { order.push(name); done(); }, ms);
});

Promise.all([load("big.js", 40), load("small.js", 10)]).then(() => {
  console.log(order.join(" -> "));
});

<script type="module"> отложен по умолчанию: defer дописывать не нужно, модуль и так качается параллельно, выполняется после разбора и в порядке разметки. Отличие от классики в том, что модуль ждёт свои import — браузер сначала соберёт весь граф зависимостей, потом выполнит его.

Отложенность распространяется и на инлайн: модуль без src тоже дожидается разбора, тогда как обычный инлайновый скрипт выполняется на месте. Атрибут async у модуля работает — со всеми последствиями непредсказуемого порядка.

window.ran = false;

const s = document.createElement("script");
s.type = "module";
s.textContent = `const secret = 42;
  window.ran = true;
  window.leaked = globalThis.secret === undefined;
  console.log("2: модуль выполнился");`;
document.getElementById("host").append(s);

console.log("1:", window.ran);

setTimeout(() => {
  console.log("3:", window.ran, window.leaked);
}, 100);

function loadScript(src) {
  const s = document.createElement("script");
  s.src = src;
  s.async = false; // сохраняем порядок между вызовами
  document.head.append(s);
  return new Promise((ok, fail) => {
    s.onload = () => ok(src);
    s.onerror = () => fail(new Error("не загрузился " + src));
  });
}

console.log(typeof loadScript);

Правило простое. Всё, что работает со страницей, — defer или модуль в <head>: браузер узнаёт про файл максимально рано, а выполняет максимально удобно. Независимые счётчики — async. Скрипт в конце <body> тоже не блокирует разметку, но начинает качаться позже всех, так что это скорее наследие, чем выбор.

Отдельная ловушка — считать, что «поставил defer, и порядок в безопасности». Он в безопасности только для скриптов, которые браузер нашёл в разметке. Всё, что вы добавляете на страницу из JavaScript, по умолчанию ведёт себя как async.

Крошечный кусок кода, нужный до первой отрисовки — тема оформления, флаг эксперимента, — иногда честнее вставить прямо в head инлайном. Миллисекунда блокировки дешевле лишнего запроса и мигания страницы.