Слушатель событий на DOMContentLoaded пожаров случайно

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

Этот скрипт импортируется через:

<script src="script.js" async></script>` tag in `<head>

И содержание сценария:

console.log("loading"); // always gets printed 
document.addEventListener("DOMContentLoaded", function() { 
    console.log("outer"); // sometimes get not printed 
    (function() { 
     console.log("inner"); // sometimes get not printed 
    })(); 
});

Консоль браузера всегда выводит loading, но иногда это не выводит остаток (как outer и inner). Выполнение либо жесткого обновления на странице, либо просто перезагрузки (попадание Enter на адресную строку), похоже, не влияет на это поведение (одинаковые результаты в каждом случае).

Я также добавлю, что outer и inner всегда печатаются парой, и без них никто не может быть.

Есть ли проблема в том, как я слушаю DOMContentLoaded? Или мне придется загрузить скрипт за пределами <head> (который я бы предпочел не по возможности)?

источник

2016-05-09 Jivan

Я просто воссоздал пример здесь. Я получаю все 3 сообщения в 100% случаев. Какой браузер вы тестируете? – nils

У вашего URL-адреса в адресной строке есть хэш, например '# foobar'? Кажется, я что-то помню о том, что страница не полностью освежает, когда это так, но я не уверен. –

@nils же в Safari, Chrome, Firefox, Safari iOS, Chrome iOS – Jivan

async теги сценария выполняются, как только код загружен, независимо от того, загружен ли контент DOM или нет. В общем, не используйте это для DOM-релевантных операций.

Вместо этого, если вы хотите, чтобы ваш файл загружался, но ваш код исполнялся только после DOMContentLoaded, используйте атрибут defer. Вы не будете нуждаться в прослушиватель событий в коде в этом случае: Источник

_{изображения: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/}