JavaScriptテク、setTimeout()のかわりにpostMessage()を使う

    後藤大地  [2010/03/15]

    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の処理やマウスなどのイベント処理)がうまく処理できなくなる可能性があることを考慮しておく必要がある。

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン