Основы JavaScript. Подключение скриптов

В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.

Вот так не cработает:
<script src="file.js">
    alert(1); // так как указан src, то внутренняя часть тега игнорируется
</script>

Нужно выбрать: либо SCRIPT идёт с src, либо содержит код. Тег выше следует разбить на два:
один — с src, другой — с кодом, вот так:

<script src="file.js"></script>
<script>
    alert( 1 );
</script>

Атрибут async

Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении <script async src="..."> браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен — он выполнится.

Атрибут defer

Поддерживается всеми браузерами. Скрипт выполняется асинхронно, не заставляет ждать страницу, но, в отличие от async, браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.

То есть, в таком коде (с async) первым сработает тот скрипт, который раньше загрузится:

<script src="1.js" async></script>
<script src="2.js" async></script>

А в таком коде (с defer) первым сработает всегда 1.js, а скрипт 2.js, даже если загрузился раньше, будет его ждать.

<script src="1.js" defer></script>
<script src="2.js" defer></script>

Атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js

!!! Либо async либо defer

Одновременно указывать async и defer не имеет смысла, в этом случае браузер использует только async.

!!! Атрибуты async/defer — только для внешних скриптов

Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src.
При попытке назначить их на обычные скрипты <script>...</script>, они будут проигнороированы.