DOMContentLoaded vs deffer
 

Подскажите, почему, подключая скрипты перед закрывающим тегом body, скрипт при перезагрузки страницы без кэширования (ctrl + f5) начинает выполнять скрипты раньше подгрузки DOM узлов?
Причем если засунуть скрипт в head и прописать defer

<script type="text/javascript" src="/js/main.js" defer></script>

происходит то же самое.

То есть если я внутри скрипта прописываю

document.addEventListener('DOMContentLoaded', function() {
//Какой-то код
});

Тогда это все работает адекватно при любом обновлении страницы, f5 и ctrl + f5

TommyWork,
чем ты это проверяешь? alert-ом в chromium? но там он работает неадекватно

console.log();

Например ширину блока со скроллом через

document.querySelector('.element').scrollWidth;

Или высоту любого элемента.

Картинки загружаются позже, DOM это сам скелет.

TommyWork,
не понял, а как связана ширина или высота блока с моментом выполнения скрипта??

Никак. Просто если скрипт подключается перед закрывающим тегом body, почему он выполняется не корректно при обновлении страницы без кэширования?
Например у меня в блоке были элементы расположенные вряд, так вот при таком обновлении выводилась ширина 1 элемента блока, а при простом обновлении с подгрузкой кэша скриптов ширина показывает с учетом всех элементов. И дело тут не в конкретном примере.
Я часто замечаю, что если скрипт подключается в конец файла, без DOMContentLoaded скрипт при загрузки страницы без кэирования работает не корректно. DOMContentLoaded можно заменить на $(document).ready() - если подключен jquery и тоже все окей, но только не для ie9- (по известным причинам). А вот если прописать

document.addEventListener('load', function() {
//Code
});

при подключении js в конец файла и обновлении страницы без кэширования не работает, событие не случается. Думаю это нормально, так как событие load при подключении скрипта в конец файла наступить не может, ДЛЯ САМОГО СКРИПТА ПОДКЛЮЧЕННОГО В КОНЕЦ. (Наверное?)

Отсюда можно сделать вывод, если файл со скриптом подключен в конец, большинство кода должно выполняться по событию DOMContentLoaded.
Хотя если скрипт добавлен в конец, таких проблем быть не должно даже при загрузки страницы без кэширования. Разве нет?

Если кто-то скажет, зачем вообще так делать, сразу могу ответить, что подключать скрипты в конец файла очень удобно, это упрощает постоянно вызывать методы по событию load, а также увеличивает скорость загрузки сайта (по стандартам того же гугла получите + к продвижению в поиске).

Конечно можно писать скрипты в тег head с атрибутом defer, но в современных браузерах, получается так что библиотеки подгружаются позже выполняемых скриптов. Поэтому я не знаю, как лучше это сделать с defer в head

Если у кого-то есть свое видение решения этого вопроса, просьба поделитесь

Пишите в конец, в чем проблема, сейчас даже
<link rel="stylesheet" href="style.css"/>
которые не отвечает за отображение верней части сайта пишут в конец боди.

Во-первых, ты всё опять своей шириной меряешь, это глупо, кэш это хранилище в браузере, а безкэш это хранилище на сервере, а теперь подумай откуда браузер данные быстрей достанет из себя или из вне...
Во-вторых, load это событие window, а не document, и как ты проверял случаемость? опять своей шириной блока? если это "Никак" не связано, зачем ты так проверяешь, ты что идиот?

Отсюда можно сделать вывод что сам там чего то косячишь по коду от своей тупости....

Rise,
Я думаю, что идиот здесь именно Вы, так как прочитав пост так и не поняли смысл, а написав свой пост не одумались его перечитать перед тем как жмякнуть кнопку отправить, чтобы лишний раз блеснуть своим слабоумием

TommyWork,
видимо никому не дано понять великого смысла твоих постов... может это ты идиот тогда?