Chromeでjavascriptの期待通りの実行順にならない

現在「htmlとcssで基礎から学ぶjavascript」という少し古い本で勉強しているのですが、そこで以下のようなコードを書きました。

javascript
1<DOCTYPE html>
2<html>
3  <meta>
4    <meta charset="utf-8">
5    <title>タイトルで～す</title>
6  </meta>
7
8  <body>
9    <p>Pタグです</p>
10    <h1>h1タグです</h1>
11
12    <script>
13      window.alert("アラートです");
14    </script>
15  </body>
16</html>

本の説明では、<script>がbodyの中で一番下にある為、pタグやh1タグの文字が表示されてから、アラートが表示されるとありましたが、chromeで実行するとアラートが表示されてからpタグh1タグが表示されます。
IE11では期待通りの順番になりました。

質問したい事は次の事です。
1.chromeだとjavascriptの実行が先になってしまうのは仕様ですか？
2.1の質問がはいの場合、どのような方法で回避するのが主流なのでしょうか？

わかる方いらしたら回答よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

仕様と考えるの自然でしょう。
当方所有のiPadも同様の挙動です。

ちょっと試してみましたが無理そうなのでsetTimeout()で遅延処理してみるのはいかがでしょうか？

投稿2020/02/21 05:52

編集2020/02/21 09:09

kyoya0819

総合スコア10429

maisumakun

2020/02/21 05:53

自分だったらonloadまで引っ張るかな… （そもそもページが開いた瞬間にalertなんて出したくないけど）

kyoya0819

2020/02/21 05:55

（出た瞬間alertについては同じ意見です。 onloadまで引っ張るというのは、 window.onload = function(){ alert('hogehoge~'); }; ということでしょうか？

puroko3

2020/02/21 06:22

回答ありがとうございます！ >chromeに関して仕様なんですね。暫く調べてみたもののわからずじまいだったので助かりました。 >回避方法について一応コメントに貼られてあるコード + bodyに対するonLoadは試してみましたが、やはりjsが先に実行されます。これに関しては、定石みたいなのがあれば知識と知っておきたいな～というものだったので、なさそうであれば仕方ないですね。また機会があれば、回答よろしくお願いいたします。

x_x

2020/02/21 08:43

仕様ということであれば、何の仕様によるものか示してほしいです。

kyoya0819

2020/02/21 08:59

> The page hasn't had a chance to render yet, at the point that the script tags are seen - but alert completely prevents Javascript execution and page parsing and page rendering. (Best to never use alert) https://stackoverflow.com/questions/60133694/why-is-my-alert-displaying-before-my-content?r=SearchResults

x_x

2020/02/21 09:04

どういう意味でしょう？ stackoverflow の一ユーザーのコメントを仕様としているのですか？

kyoya0819

2020/02/21 09:08

仕様じゃなくて、こういう理由だからでは？ということを言いたいまでです。私が開発しているわけではないのでそこまでの仕様は知りません。一般的に考えて「仕様」という結論を出したまでです。表現を修正しておきます。

行動規範の内容に同意します