ゆっくり…して…イってネ！

ここんとこ JavaScript 関係のネタばっかアップしてきましたが、そろそろ本題に突入です。document.write は色々と便利なのですが、実行が同期されるのがたまに使いにくいところ。

実行が同期されるとはどういうことかと言うと、下のコードで言うと script タグの実行が終わらないと b が絶対に出力されないということです。（script の実行とブラウザのレンダリングが同期してる。）

<script type="text/javascript">
document.write('a');
</script>
b

同期している以上 script の実行が遅いと、その間ブラウザのレンダリングが待たされることになります。例えばポックンのブログとかはサイドバーのブログパーツの実行が遅くて背景の描画が待たされることとかがたまにあります。こういうのは見てる方からするとあまり嬉しくないのでできるだけ無い方がいいす。ただ単純に document.write を使っちゃうと回避できないので、その辺ゴニョゴニョしようってのが今日のお題です。

とりあえず単純に上のコードを非同期にしてみます。

<script type="text/javascript">
document.write('<span id="replacement"></span>');
setTimeout(function() {
    var o = document.getElementById('replacement');
    var p = p.parentNode;
    p.replaceChild(document.createTextNode('a'), o);
}, 0);
</script>
b

document.write 残っとるやないけ！と突っ込まれそうですが、完全に消すことはできません。ほぼ非同期って感じす。なんで上のように明らかに実行の速いコードをほぼ非同期にするのはほぼ意味がありませんが、例として簡単なのでっつー感じで。

とりあえず document.write で入れ替え用のオブジェクトを埋め込んでから setTimeout を実行し、非同期で入れ替え用オブジェクトを置き換えるあたりがキモです。setTimeout の中身が充分重ければ、非同期にすることでブラウザ上での動きがかなり速く感じられるようになります。この辺と組み合わせて、最初に（同期部分で）読み込むコード量を減らしたりとかも効果があると思います。Google Ajax Libraries の google.load とかそういう効果を狙ってだと思います。

<script type="text/javascript">
document.write('<span id="replacement"></span>');
$.ajax({
    url: "...",
    success: function(data) {
        var o = document.getElementById('replacement');
        o.innerHTML = data;
    }
});
</script>
b

本題とか言いつつ、今日は内容が中途半端だったような気がする。

たぶんもう一回続く…

先日書いた<script>タグのasync属性を使わずに非同期でJavaScriptを読み込む方法では、非同期で JavaScript を読み込んだ際に読み込みが完了したかのチェックを setTimeout でポーリングしてたのですが、script.onload と script.onreadystatechange で実装する方法についても説明しときます。

まず先日のコードのおさらいです。以下の myfunc.js を非同期で読み込みます。

// myfunc.js
function myfunc() {
    alert('myfunc was loaded!');
}

setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    head.appendChild(script);
}, 0);

(function() {
    if (typeof(myfunc) == 'undefined') {
        setTimeout(arguments.callee, 15);
        return;
    }
    myfunc();
})();

このように setTimeout を使って script を head に入れると JavaScript の読み込みは非同期になります。

myfunc.js で定義される関数はファイルの読み込みが完了しないと存在しないので、呼び出す前にチェックしないといけません。そのチェックを setTimeout と arguments.callee でしてますた。

前回までの 24 は以上。

今回の 24 は大統領が暗殺され…じゃなくて、上のコードを script.onload と script.onreadystatechange で書き換えます。

var initialized = false;
var script_onload;

setTimeout(function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    script.onload = function() {
        if (!initialized) {
            initialized = true;
            script_onload();
        }
    };
    script.onreadystatechange = function() {
        if (!initialized) {
            switch (script.readyState) {
            case "loaded":
            case "complete":
                initialized = true;
                script_onload();
                break;
            }
        }
    };  

    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    head.appendChild(script);
}, 0); 

if (initialized) {
    myfunc();
} else {
    script_onload = function() {
        myfunc();
    };
}

超長ったらしくなった＼(^o^)／

ブラウザ上の処理はこっちの方が明らかに軽いのですが、配信元サーバの関係でファイルサイズの方が気になる場合は onload/onreadystatechange じゃなくて setTimeout で書いた方が良いかもしれません。

onload と onreadystatechange 両方記述してるのは IE だと onload が動かんからで、クロスブラウザ対応みたいな感じです。

ちなみに、非同期でスクリプト読み込むなら JSLoader | labs.37to.net というライブラリが使えます。ポックンの方はあんま外部のライブラリ使える状況じゃないのでこういう流れになってるんすが、その辺はおいおい明らかになるはずす…

刮目せよ！(c)ゆーすけさんたまりあ

またまた続く…

HTML5 では <script> タグに async という属性が加わってまして、これを指定しておくと src で指定された JavaScript ファイルの実行が非同期で行われます。（src 属性を指定しないと async は意味を持ちません。）

<script type="text/javascript" src="http://..." async="async">
</script>

ググってると async の値として async=”true” を指定しているページが多いようですが、W3C の HTML5 の定義（4.3.1 The script element と 2.4.2 Boolean attributes 参照）だと空の文字列か属性名そのものを指定しろってことになってますので、こっちが正しいです。（たぶんw）

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace.
2.4.2 Boolean attributes

まあ仕様書は読みにくいかもしれませんので、細かいことは w3schools.com の HTML 5 script Tag をご覧ください。こっちにはガッツリ値は “async” と書いてます。（HTML5 は XHTML じゃないので、面倒な話に関わりたくなかったら async 属性には値を指定しない方がいいと思いまつw）

いきなり話がだいぶずれちゃいましたが、とりあえず HTML5 では <script> タグに async 属性が追加され、これを使うと非同期で JavaScript を読み込むことができます。

※ただし IE6 は除く

Google Code Blog の Google Analytics Launches Asynchronous Tracking によると、Firefox 3.6 が始めて公式に async 属性をサポートしたブラウザらしいす。async 属性だけだと古いブラウザでは非同期になりませんので DOM を使って非同期になるようにコーディングしないといけません。幸い Google Code Blog に以下のような記述がありますので、古いブラウザでも同じ効果が得られます。

While it creates the same effect as adding a <script> element to the DOM, it officially tells browsers that this script can be loaded asynchronously.
Google Analytics Launches Asynchronous Tracking

ちょっと言い訳

誤解の無いよう先に書いときますと、時系列的には

　AZlink/widget (embed) でほぼ完全な非同期コードが必要になった
　　↓
　色々試す
　　↓
　でけた＼(^o^)／
　　↓
　ブログに書こうそうしよう！
　　↓
　ついでにちゃんと調べとくか←今ここ

という順になってまして、調べたついでに Google Analytics のこと書いちゃいましたが基本的に書きたかったことは Google Analytics の非同期コードとはあんま関係ないす。なら GA のこと書くなって感じすが、せっかく調べたんだからいーじゃんいーじゃんすげーじゃん（古w）。

とりまついでなんで GA のコード（ga.js）を見てみたらだいたい似たようなことしてましたが、要求事項が違うようでコードも微妙に違います。ということで GA とはあんま関係ないんだからねっ！

ということでやっと本題す。前置き長くなってどーもすいません。

setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://...';
    head.appendChild(script);
}, 0);

<script>タグのasync属性を使わずに非同期でJavaScriptを読み込むには、setTimeout(, 0) の中で DOM オブジェクトを head 要素にひっつけるだけでいいす。（ちなみに ga.js では setTimeout してないのですが、これ入れないと JavaScript の読み込みでブロッキングが発生します。コードの実行はたぶん非同期なんでしょう。Firefox 3.5.7 で確認。）

head エレメントの取得は、document.getElementsByTagName(“head”)[0] || document.getElementsByTagName(“body”)[0] の方が手堅いかもしれません。（ga.js はこうなっとりました。でも GA は関係な(ry。）ただ、たしか head 要素が取れない時があるのは Opera だったと思うので、サポートするブラウザを IE5.5 以降とするなら上のコードで問題ないす。

ちなみに jQuery も head の取得に上と同じコードを使ってるので（っつーか上のコードの head を取得する部分は jQuery からパクったを参考にしたものです）、これが動かないブラウザだと jQuery も動かないので昨今の状況を鑑みると充分と思います。

なお、非同期で読み込んだ JavaScript で定義されてる関数を呼び出す場合、スクリプトの読み込みが終わるのを待ってから実行する必要があります。

例えばこういう JavaScript ファイルがあって、

// myfunc.js
function myfunc() {
    alert('myfunc was loaded!');
}

それを非同期で読み込んですぐ myfunc を実行しようとしても、

setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    head.appendChild(script);
}, 0);

myfunc();

このタイミングでは myfunc は未定義です。JavaScript の実行キューは一本なので、setTimeout(, 0) が myfunc よりも先に実行されることはありません。未定義の関数を呼び出すとエラーになりますので、myfunc が定義されてから関数を実行するようにコードを書き換える必要があります。

リトライ＆ゴーはarguments.calleeとsetTimeoutを使ってJavaScriptのリトライ処理を簡単に書く方法で説明した方法が簡単だと思います。で、完成形はこんな感じす。

setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    head.appendChild(script);
}, 0);

(function() {
    if (typeof(myfunc) == 'undefined') {
        setTimeout(arguments.callee, 15);
        return;
    }
    myfunc();
})();

てな感じで前の記事から続いていたのでつ。

続く…

jQuery のソースから拾ってきたネタなんすが、arguments.callee と setTimeout を使ったリトライ処理が超便利なのでご紹介。

まず基本形はこんな感じす。

(function() {
    // なんか処理
    if (error) {
        setTimeout(arguments.callee, 20);
    }
})();

上のコードは error が真のとき20マイクロ秒後に無名関数の実行をリトライします。20マイクロ秒だとリトライ間隔が短いような気がするかもしれませんが、リトライ回数は1秒に50回ですので言うほどでもないです。

arguments.callee は関数内でのみ参照可能で、実行中の関数自身への参照を保持します。上の例では arguments.callee は無名関数への参照となります。setTimeout に arguments.callee を渡すその関数を再実行することになります。

実用的なケースで言うと ajax のエラー処理なんかどうでしょう。

ぶっちゃけ ajax のプログラム書いてると、403 とか 404 とかじゃないエラーは一定時間したらリトライさせたいとか多いんじゃないでしょうか。500 とかだいたいバグですし、ネットワークタイムアウトのときはマジでリトライしたい訳ですし。

そんな時こそ arguments.callee ですよ奥さん！！wコードが簡単になること請け合いです。

(function() {
    var callee = arguments.callee;
    $.ajax({
        url: 'http://...',
        error: function(xhr, status, e) {
            switch (xhr.status) {
            case 403: case 404:
                throw(xhr.status + ' ' + xhr.statusText);
                break;
            default:
                setTimeout(callee, 60000);    // 60000ms = 1分
                break;
            }
        }
    });
})();

error ハンドラの無名関数内で arguments.callee を参照すると error ハンドラそのもの（function(xhr, …) の方）になりますので、リトライしたい範囲を無名関数で括ってその arguments.callee を（一旦変数に入れてから）呼び出す必要があります。

この方法の便利なところは、エラーによるリトライが後から必要になった場合でも、リトライが必要な箇所を無名関数で括ってしまえば良いだけなので記述が簡単な点です。

似たような処理を setInterval を使って書くこともできますが、リトライを止める時に clearInterval を呼び出さないといけないが結構面倒だったりします。どの程度面倒かは自分で比べてかーさい。

ということで、ある処理が成功するまでリトライするコード（は JavaScript では割と出てくると思います）を書くなら、arguments.callee と setTimeout を組み合わせた方が便利だよっつーお話ですた。

てゆーか arguments.callee ちゃんマジ便利www

続く…