2019.05.20
Javascript/jQueryの実行までが遅い理由！役立つかも？JSの実行タイミングを知る
こんにちは！ 佐々木です。
Javascriptが実行されるまで遅い、いつまで経ってもイベントが実行されない！という問題をよく聞きます。
今回は以外によく理解できていないかも？ｊQuery/Javascriptの実行タイミングについてです。
大体の場合「load系」のイベントをよくわからないまま使っている場合に起こります。
jQueryで書くとこれです
$(function(){
alert(1);
});
$(window).on('load',function(){
alert(1);
});
$(document).ready(function(){
alert(1);
});
上記、どれもだいたい同じ意味です。
すべてコンテンツロードを待って実行されます。
ネット上にあるコードをコピペしてくると大体こういった形になっているかと思います。
で、何故こういう記述になるかと言うと・・・。
下記のようにheadタグ内に記述する場合や、JSファイルを読み込みする場合です。
<script src="/js/jquery.js"></script> <script src="/js/hoge.js"></script> </head> <body> <div id="hoge1"></div> </body>
例えばこの状態で#hoge1に何かしようとすると・・・。
当然headタグの位置では#hoge1はまだロードされていないため、何もできません。
なので、さきほどのコードのように、DOMのロード時に実行されるようにしているのです。
上記でも軽量なコンテンツであればさほど問題にもなりません。
しかし、コンテンツ量が多く、フッタなどで広告タグや大容量Javascriptファイルなどを読み込んでいるとなかなか実行されない事態になります。
（すべての読み込みが終わるまで実行されないので）
ではどうすれば良いかと言うと・・・・。
たとえば必要なjQueryファイルやライブラリなどをhead内で読み込んでいる場合、下記のように読み込み位置を変更すればOKです。
<script src="/js/jquery.js"></script> </head> <body> <div id="hoge1"></div> <script src="/js/hoge.js"></script><!-- ここに移動している --> こんてんつ・・・・・（省略） </body>
で、この際hoge.jsにonload系の記述があれば、取り除きます。
操作したいDOMがすでに読み込まれていれば必要ないからです。
シンプルにしましょう。
$(function(){
$('#hoge1').html("Hooah!!!!!");
);
このようになっていたら・・・・下記のように不要なloadイベントを取り除きます。
$('#hoge1').html("Hooah!!!!!");
また、jsファイル関係がフッタにすべて読み込まれているような場合でも同様です。
下記のようにしましょう。
</head> <body> <div id="hoge1"></div> こんてんつ・・・・・（省略） <script src="/js/jquery.js"></script> <script src="/js/hoge.js"></script> </body>
どうしてもhead内にしかJavascriptを記述できない場合を除き、load系イベントが不要なことがわかるかと思います。
こうすることでJavascript実行タイミングの遅延を防ぐことができます。
ただしくloadイベントを理解して使いこなしましょう！
以上、佐々木でした！
