JS memo

お洒落にJavaScript。

2019年2月3日7:48

javascriptがページの読み込みを中断しない方法

メインビジュアル

javascriptがページの読み込みを中断しない方法

JavaScriptの読み込みには同期的処理と非同期処理の二種類の方法があります。JavaScriptを非同期的処理で読み込む設定をすることで、Webサイトの速度は断然早くなります。JavaScriptを非同期にする方法は色々あるので、各方法とそのメリット・デメリットをご紹介します。

    目次

  1. 非同期処理とは?
  2. 方法その1 : async, defer
  3. 方法その2 : setTimeout()
  4. 方法その3 : window.onload
  5. 方法その4 : addEventListener()
  6. まとめ

非同期処理とは?

まず同期的処理とはDOMツリーのレンダリング(htmlファイルを読み込んで、ブラウザに表示させること)の際に、Javascriptが現れた瞬間(読み込み)に実行を行う方法です。言い換えると、他のタスクを中断して実行されることです。

特別jsに何の手も加えていなければ、同期的に読み込んだ後、他の読み込みを中断させて、すぐに実行が行われます。そのため、jsの処理にかかった時間分、Webサイトの表示速度が遅延してしまうということです。

jsの同期的な読み込み

非同期処理とはレンダリングの読み込みを中断することなく、jsを実行してね!と指示することで、上記のような遅延を回避しよう!といったものです。

ここで、jsを非同期に読み込むには様々な方法があるので、メジャーなものをいくつかご紹介します。

その1 : async属性, defer属性

詳しくはコチラの記事→

非同期にしたい外部のjsファイルを読み込むscriptタグに「async」あるいは「defer」を書くだけです。

<script src="example.js" async></script> <!--asyncの場合 -->
<script src="example.js" defer></script> <!--deferの場合 -->

メリット

jsを理解していなくても、簡単に実装することができる。

デメリット

インラインで書かれたjsには無効となってしまいます。

ちなみにこの二つの違いは、
defer → レンダリングの完了後に順番通りにjsを実行させるよう指示できます。
async → jsの実行されるタイミングと順番が保証されていません。
そのため、jsを非同期にする際、この二つの使い分けは確認しておくのが良いと思います。

その2 : setTimeout()

setTimeout()とはjsを発動させる時間を時間を指定(ミリ秒単位)して遅らせることができます。

設定の仕方は遅延させたいjsをsetTimeout(function(){ 処理するjs })で包み込んであげるだけ!そして最後の()にどれぐらい遅延させたいかを設定します。

以下の例はお腹が空いていますか?とalertで3000ミリ秒(3秒)後に表示するjsです。

setTimeout(function() {
  alert("Are you hungry?");
}, 3000);

メリット

jsファイルが複数あった時、タイマーをセットできるため、順序を決めて実行できる。

デメリット

インターネットやブラウザの環境によってもページ速度が変わってくるので、レンダリングが完了しない前に実行される可能性があります。

その3 : window.onload

window.onloadはDOMのレンダリングが完了した後にjsを読み込んでねと指示できます。書き方は以下の通りです。

window.onload = function() {
  alert("Are you hungry?");
};

メリット

以下のようにbodyタグに記述することができる

<body onload="test()">

デメリット

複数のwindow.onloadを使用した場合、最後に記述されたものだけが実行される。

全ての画像やスタイルシートの表示を待ってから実行されるので、遅い場合がある。

その4 : addEventListener()

addEventListener()はwindow.onloadと似ています。しかし違うのは、レンダリング後に画像や残りのスタイルシートが実行される前にjsを実行できるということです。もし、レンダリング後すぐに実行させたい場合は、addEventListener()を使うのが確実です。また何個でも実行することができるので、複数使用したい場合もこちらをオススメします。

window.addEventListener('load', function() {
  alert("Are you hungry?");
})

メリット

何個でも使用できる。
画像やスタイルシートの読み込みを待たずに実行できる

まとめ

jsがhtmlのレンダリングをブロックしない方法をご紹介いたしました。

それぞれのメリット・デメリットを理解した上で、どれを使用するか決めていただければと思います。

それぞれの方法の詳細は後日書こうと思います!