◆ 非同期処理のコールバックが DOM 構築中に実行される可能性がある
  ◆ 非同期にしても DOM に触る場合は ロード済みの確認したほうが良い
◆ 別の script タグの実行中には割り込んでコールバックが実行されることはない 

<!doctype html>
<script>
fetch(url)
    .then(e => e.text())
    .then(e => document.querySelector("div").innerHTML = e)
</scirpt>
<div></div>

こんな HTML があります

普通は body 内のタグより先に script タグを書くと 実行するときに DOM が構築完了していないので クエリセレクタなどの要素を取得するところで null になってエラーが起きてしまいます
なので window.onload など DOM 構築後に DOM を操作する関数を実行したり script タグに defer をつけて script 自体が DOM の準備ができてから実行するようにします

今回は そんな遅延させずに url からデータをもってきます
そして データを取得したら div 要素に入れます

fetch のところで 非同期処理になるので url からのダウンロード中に script が終わって DOM の構築が進んでいるので ほぼ問題なく div にデータが入ります

ただ DOM の構築が遅いときは エラーが起きてしまいます

これまで Chrome では一度も起きてなかったので シングルスレッドで DOM が終わってからコールバックが実行されたりかなー と思ってましたが IE であるページを開いた時に このタイプのエラーが起きていて DOM 構築中でもコールバックが優先されるんだと知りました

Chrome ではそこそこ DOM 重くして url をローカルのものにしてすぐにデータ取得できるようにしても DOM 構築のほうが早かったので script タグのあとに 数千の要素を書いておいたら やっと セレクタのものが null になっている現象を見ることができました


また
<!doctype html>
<script>
var val = 1
fetch(url)
    .then(e => e.text())
    .then(e => console.log(val))
</scirpt>
<script>
for(var i=0;i<100000;i++){
    1 + 1
}
val = 10
</script>
こういう script に時間がかかるものでは for 文の合間に fetch のコールバックが実行されることはないです
普通の JavaScript と同じで JavaScript の処理はシングルスレッドなので 2 つ目の script タグが fetch のコールバックより先に開始されたら script タグの実行が終わるまで  fetch のコールバックは待機状態です

DOM の構築って JavaScript とは別のスレッドなのか ある程度タグを読むごとに 待機中の JavaScript に処理をゆずってくれるような仕組みなのかな?