readyとonloadはどちらも 『囲った範囲の処理の実行タイミングを制御する』 という意味では同じです。
ではreadyとonloadで何が違うのかと言うと、 『どのタイミングで実行されるか』 です。
結論から言うと以下のような順番で実行されます。

つまり readyが先に実行され、その後にonloadが実行される ことになります。

DOMとは何か

上で出てきた DOM とは 「Document Object Model」 のことで、この仕組みのおかげでJavaScriptなどからHTMLの各要素にアクセスができます。
では 「DOM構築の完了」 とは何を意味するかと言うと
「テキストボックスとかボタンとか画面に表示するHTML要素の読込が全部終わったよー」
っていうことです。

では何故この DOM構築の完了を意識しないといけないか を説明します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <script> //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //① $("#text1").val(a); //② </script> <input type="text" id="text1" value=""> //③ </body>

特に何も記述していない場合、HTMLファイルは 上から読み込まれていく ので、 ①→②→③ の順で実行されます。
しかし、 ② の実行時にはまだ ③ のテキストボックスは 構築されていない のでidを指定しても 「そんなのねぇよ」 ってなりますね。

ここで先程のreadyを使います。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <script> $(function() { //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //② $("#text1").val(a); //③ </script> <input type="text" id="text1" value=""> //① </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <input type="text" id="text1" value=""> //① <script> //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //② $("#text1").val(a); //③ </script> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <script> $(window).on('load', function() { //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //② $("#text1").val(a); //③ </script> <input type="text" id="text1" value=""> //① </body> たまにこんなソースを見ますが、 「別にreadyで良くね？」 って思います。
onloadにすると 画面の全要素を読み込み終えて初めてスクリプトが動き出す ので、場合によっては 画面表示まで無駄に時間がかかり ます。
なので画像のサイズ取得など 「DOM操作以外の特別な処理が必要な場合」 を除き、 onloadは使うべきではない と思います。

<script>タグはどこに書くべき？

上記で、 <script>タグの書く場所によって、readyの記述が必要かどうかが変わる。 と述べました。

結局どっちで書くべきなんじゃ？

大阪でフリーランスエンジニアを経て株式会社Reach Scriptの代表取締役となった広島出身通称「じゃけぇ」です。

中小IT企業に入社後３年経たずして２５歳で独立
自身がフリーランスに挑戦しようと迷っているとき、大阪のフリーランスエンジニアの情報の少なさに落胆

「なら自分が挑戦して情報を発信していこう」

ということでサイトを開設