読者です 読者をやめる 読者になる 読者になる

日々過ごすブログ

とりあえず文章を書いてみよう、というブログですね

外部JavaScriptを非同期に読み込めば、コンテンツ表示の遅延を回避できる

担当している案件で、外部のJavaScriptライブラリをインターネット越しにインクルードすると言うことをやっていた。

こんな感じだ。*1

<head>
~~~~
<script type = "text/javascript" src = "//hoge.jp/lib.js">
</script>
~~~~
</head>

ところが、このようなナイーブな書き方だと、
lib.jsが正常に読み込めなかった場合、その行で処理が止まってしまって、肝心のコンテンツの表示が遅延してしまう恐れがある。
色々と試行錯誤した結果、インクルード自体を非同期処理にしてしまうことに。

こういうjsを作って、ローカルなサーバに配置する

// asyncInclude.js
(function () {
    // DOMツリーに、<script></script>要素を追加し、すぐさまそれを取得する
    var tagjs = document.createElement("script");
    var s = document.getElementsByTagName("script")[0];
    // ここで非同期設定をtrueにしておく
    tagjs.async = true;
    // 後は属性を設定して、親ノードの末尾に挿入する
    tagjs.src = "//hoge.jp/lib.js;
    s.parentNode.insertBefore(tagjs, s);
  }());

そして、このファイルを画面から読み込む。

<head>
~~~~
<script type = "text/javascript" src = "//fuga.jp/asyncInclude.js">
</script>
~~~~
</head>

こうすると、読み込みが非同期となるので、万が一通信エラーが起こっても、他のコンテンツの表示に影響賀でなくなる。
ただし、このやり方は、そのjsの読み込みが遅れてしまっても構わない場合のみ有効。
初期表示時に必要なライブラリの読み込みを非同期にしてしまうと、当然ながら必要なタイミングで呼び出せないことになってしまうからだ。

*1:アドレスが//から始まっていると、これを書いたページにプロトコルが依存する。このソースファイルがhttpsで公開されていれば、https://hoge.jp/lib.jsと翻訳される