Operaは文字列変換でreplaceを使うと遅い?

 うちのサイトではInternet Explorer、Firefox、Netscape、Operaの4ブラウザでJavaScriptの動作確認を行っているのですが、JavaScriptを処理する速度という点でも個性が別れているようです。

 このサイトで扱う文字列の変換を行うサンプルでは、for文による一文字一文字の変換ではなく、replace関数を使っているものも少なくありません。

 その理由は、Internet Explorer、Firefox、Netscapeではfor文よりもreplace関数を使ったもののほうが圧倒的に速いことが多かったからです。

 例として、次の二通りの関数を見てみましょう。これはどちらも、引数の文字列を数値文字参照の形式に変換するものです。

function toNCR(str){
    var i, len, code;
    var out = "";

    len = str.length;
    for (i = 0; i < len; i++) {
        out += "&#" + str.charCodeAt(i) + ";";
    }
    return out;
}
function toNCR(str){
    var out;
    out = str.replace(/.|\n/g, function(chr){
        return "&#" + chr.charCodeAt(0) + ";";
    });
    return out;
}

 どちらもcharCodeAt関数により文字コードに変換するという点では同じですが、前者はfor文を使い一文字ずつ変換、後者は正規表現を利用し全ての文字を置換するものです。

 それぞれの方法で長文の変換を行った結果、次の表のようになりました。

変換の方式 ブラウザ名 変換文字数 処理時間
replaceを使用 Internet Explorer 6.0 10万 1.534秒
Opera 7.54 1万 5.450秒
Firefox 1.02 10万 4.088秒
Netscape 10万 2.972秒
for文で変換 Internet Explorer 6.0 1万 1.284秒
Opera 7.54 10万 1.522秒
Firefox 1.02 10万 2.835秒
Netscape 10万 2.684秒

 この結果を見ると、特にInternet ExplorerとOperaは正反対のように見えます(replaceではOpera、for文ではInternet Explorerが10万ではなく1万文字の変換でそれだけの時間がかかっていることに注意)。

 for文のほうが、Internet Explorer以外のブラウザでは高速のようですが、Operaを除いてさほど大きな差ではないのと、圧倒的にInternet Explorerの利用者が多いという点から、このサイトではfor文ではなくreplaceを使っていることが多いです(Operaユーザーの皆さんには申し訳ないです)。

 ちなみにOperaで時間のかかる処理をするとわかるのですが、他のブラウザと違ってウィンドウが動かなくなることがないという点で優れていると思います。他のブラウザだと、処理が終了するまで何もできないのに、Operaではスクロールや文の選択などに支障がありません。また、長い時間がかかるスクリプトの処理の途中でウィンドウを閉じたくなったときでも「閉じる」ボタンをクリックするだけですぐに終了できるようです。