Firefox web browser - Faster, more secure & customizable

JavaScriptのタイムアウト処理「setTimeout」で処理できる最短の時間はブラウザごとに違っている。これはsetTimeoutで極端に短い時間が繰り返し使われた場合にブラウザのほかの処理に影響がでるのを避けるためのもので、主要なブラウザではだいたい10msが最短値に設定されている。Chromeではこの制限は緩く2msほどとされている。つまり、引数に0を指定しても0msとしては処理されず、10msなり2msなりで処理が実施されることになる。

しかしほかの処理はさておき、ともかく処理時間の短縮を実現したいというケースもある。そうした場合に利用できるテクニックをDavid Baron氏がDavid Baron's weblog: setTimeout with a shorter delayにおいて紹介している。これはirc.mozilla.orgに掲載されたテクニックをまとめたもので、端的にいうとsetTimeout(0)の代わりにpostMessageを使うという内容になっている。

Firefox 3.7 Alpha 2 - Demo: Using postMessage to do setTimeout with a real zero timeout実行例

Chrome 5 - Demo: Using postMessage to do setTimeout with a real zero timeout実行例

Safari 4 - Demo: Using postMessage to do setTimeout with a real zero timeout実行例

Opera 10.5 - Demo: Using postMessage to do setTimeout with a real zero timeout実行例
postMessage[ms] setTimeout[ms]
Firefox 3.7 Alpha 2 4 969
Chrome 5 4 506
Safari 4 132 1145
Opera 10.5 11 522

デモンストレーションのページが用意されており、IEを除くすべての主要ブラウザで実行できる。たしかにsetTimeoutを使う場合よりも短い時間で処理が終了していることを確認できる。

Demo: Using postMessage to do setTimeout with a real zero timeoutのコードsetTimeout処理周辺

Demo: Using postMessage to do setTimeout with a real zero timeoutのコードpostMessage処理周辺

処理速度を優先させたい場合にはこのテクニックは興味深い。ただしsetTimeoutとpostMessageはそもそも用意された目的が異なっている。この実装もこの例で意図するように動いてはいるものの、本来期待されている使われ方をされているものではないという点に留意しておく必要がある。また、ブラウザが実装を変えれば同テクニックは利用できなくなる可能性もある。同テクニックの活用を検討する場合、setTimeoutの代わりにpostMessageを使うことでブラウザの他の処理(たとえばUIの処理やマウスなどのイベント処理)がうまく処理できなくなる可能性があることを考慮しておく必要がある。