JavaScript において、文字列を外部化することで本当に高速化できるのかについて考察してみました。
まず、以下のコードを用いて IE 6.0 SP2, Opera 8.5, Firefox 1.5.0.1 でテストしてみます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<title>文字列外部化のテスト</title>
<script type="text/javascript">
// <![CDATA[
window.onload = function() {
{
// 空のfor文
var start = new Date().getTime();
for(var i = 0; i < 1000000; i ++) { }
var end = new Date().getTime();
document.getElementById('result-0').firstChild.nodeValue = end - start;
}
{
// 文字列を外部化したfor文
var start = new Date().getTime();
var text = '(´・∀・`)';
for(var i = 0; i < 1000000; i ++) { text }
var end = new Date().getTime();
document.getElementById('result-1').firstChild.nodeValue = end - start;
}
{
// 文字列リテラルを含むfor文
var start = new Date().getTime();
for(var i = 0; i < 1000000; i ++) { '(´・∀・`)' }
var end = new Date().getTime();
document.getElementById('result-2').firstChild.nodeValue = end - start;
}
{
// 文字列オブジェクトをnewするfor文
var start = new Date().getTime();
for(var i = 0; i < 1000000; i ++) { new String() }
var end = new Date().getTime();
document.getElementById('result-3').firstChild.nodeValue = end - start;
}
}
// ]]>
</script>
</head>
<body>
<div><span id="result-0" style="margin:1em;">0</span>[ms]</div>
<div><span id="result-1" style="margin:1em;">0</span>[ms]</div>
<div><span id="result-2" style="margin:1em;">0</span>[ms]</div>
<div><span id="result-3" style="margin:1em;">0</span>[ms]</div>
</body>
</html>一番上から、空のfor文、文字列を外部化したfor文、文字列リテラルを含むfor文、文字列オブジェクトをnewするfor文。
どれも、やってることはそんなにかわらない。では、実行速度はどうだろうか？
ちゃんと文字列リテラルは最適化されるだろうか？
考察
ブラウザ界の支配者でこれだけの差が出てるんだから、どのサイトでも文字列の外部化をやらないとまずくないのかな？そう思って調べてみた。
でも、ほとんどのサイトがやっていない。。。
お。やってるサイトがあった！
・・・・ん(・o・)？
これって ＭＳ さんのサイトだよね？うーんとえーと。何かが・・・違う。
そうだ！気付いてるなら頼むからブラウザを直してくださいよ！！！ゲイツさん！！
