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

console.log();

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

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

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

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

Никак. Просто если скрипт подключается перед закрывающим тегом 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"/>
которые не отвечает за отображение верней части сайта пишут в конец боди.

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

Rise,
Там нет никакого великого смысла, для человека который хотя бы ознакомился с книгой Ильи Контора. Единственное, я перепутал window с document, так как часто пишу на js и jquery, некоторые вещи путаются, мой косяк.

По поводу форума, мне жаль что здесь появляются тролли, скорее всего это связано с отсутствием администрации.

Но еще больше жаль, что форум сайта, где выложен идеальный учебник по JavaScript, и скринкасты по Node.js с детальным обучением работы с пакетным менеджером скатывается в уровень подскажите как это сделать, потому что я не хочу читать учебник. Отсюда большинство подобных троллей набивают посты отвечая на темы уровня "а как мне именно это вывести", типа

var i = 0;
alert(++i);

При том что данный форум мог бы быть русской версией stack overflow в веб разработке.
В свое время от нескольких людей я получал здесь хороший развернутый ответ по нераскрытым вопросам из учебника, без надобности, писать мне готовый код под конкретную задачу

TommyWork, администрация тут.
Rise, Вам предупреждение, оскорблять никого не нужно.