◆ HTML に書いた script タグは書いた順に実行される
◆ JavaScript で挿入した script タグは src 属性したものより先に innerHTML を使ったもの
◆ module に指定すれば JavaScript で挿入した script タグでも実行順にできる

普通に script タグ

普通の script タグは src 属性もインラインのスクリプトでも書いた順に実行されます

[main.html]
<script src="file.js"></script>
<script>console.log("inline")</script>

[file.js]
console.log("file")

file
inline

JavaScript で script タグ

defer と async を false にしても JavaScript で script タグを作ると inline が先に実行されます

<script>
const loadScript = obj => {
const elem = Object.assign(document.createElement("script"), obj, {
defer: false,
async: false,
})
document.head.append(elem)
}

loadScript({src: "file.js"})
loadScript({innerHTML: `console.log("inline")`})
</script>
inline
file

JavaScript で script タグ (module)

JavaScript で script タグを作っても module にすると順番に実行されます

<script>
const loadScript = obj => {
const elem = Object.assign(document.createElement("script"), obj, {
defer: false,
async: false,
type: "module",
})
document.head.append(elem)
}

loadScript({src: "file.js"})
loadScript({innerHTML: `console.log("inline")`})
</script>
file
inline


通常の script だと innerHTML を指定すると同期的に実行され src 属性を指定すると非同期的に実行されます
module になると innerHTML を指定しても src 属性と同じ非同期的に処理されて読み込まれた順になります