Порядок загрузки и выполнения JS

[d0ublezer0]

В начале страницы:
<script async type="text/javascript" src="/templates/fd/js/custom.js"></script>
<script async type="text/javascript" src="/templates/fd/js/owl.carousel.min.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.event.move.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.twentytwenty.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.inputmask.bundle.min.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.toc.js"></script>
<script async type="text/javascript" src="/templates/fd/js/jquery.sticky.js"></script>
<script async type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

/* тут html и php */

В конце страницы:

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

предполагалось, что последний скрипт с defer загрузится и выполнится только когда загрузилось всё, но у меня валятся ошибки инициализации

Uncaught TypeError: $(...).inputmask is not a function

значит, не успели загрузиться скрипты.

при том в последнем файле main.js

все обращения к функциям обёрнуты в 

$(document).ready(function () { /* тут код */});

 

как гарантированно загрузить всё, при этом не мешая загружаться странице?

[Switch74]

<script  async

не ждет загрузки скрипта и видимо когда у вас загружается /templates/fd/js/mai n.js не все скрипты в начале страницы уже успели загрузиться

[d0ublezer0]

25 минут назад, Switch74 сказал:

не ждет загрузки скрипта 

Верно.

Я пытался применить знания из этой статьи, предполагая, что скрипты с async будут грузиться как попало, а defer загрузится уже после всего-всего.

 

[Switch74]

попробуйте указать defer для всех

[d0ublezer0]

25 минут назад, Switch74 сказал:

попробуйте указать defer для всех

В этом весь замысел теряется. Скрипты, расположенные внизу страницы и без указания defer прекрасно грузятся последовательно. но загружаться-то они начинают после основного кода. А идея была в том, чтобы грузить их параллельно, не мешая коду. А вот обратиться к ним - только после загрузки всего.

Можно конечно в main.js проверять наличие загруженных функций, но это не значит, что они будут привязаны к объектам на странице, когда наконец-то загрузятся.

[Switch74]

ну проведите анализ зависимости скриптов
defer так же грузит асинхронно, только выполняет в нужной последовательности, а не как только загрузится

 

[d0ublezer0]

О, я не до конца понял статью, значит.

Отлично, тогда defer подходит, т.к. зависимость известна.