ブラウザ別DOM実装差異 〜new Option, innerText〜
環境
- Windows XP 32bit
- Mozilla Firefox 16.0.1
- Opera 12.02 (1578)
- SRWare Iron 22.0.1250.0 (160000)
- Microsoft Internet Explorer 8.0.6001.18702
予備知識
JS 式 | 実体 |
---|---|
new Option("text","value") | HTML 要素 <option value="value">text</option> |
Option("text","value") | |
document.body.innerText | "some 文字列" |
document.body.textContent |
実装状況
new Option | Option() | innerText | textContent | |
---|---|---|---|---|
Firefox 16 | OK | OK | NG | OK |
Opera 12 | OK | OK | OK | OK |
Iron 22 | OK | NG | OK | OK |
IE 8 | OK | NG | OK | NG |
ブラウザ別 JavaScript 速度計測 if else 文, switch case 文, ?: 三項演算
結果
ブラウザ別に速度を計測したところ、以下の結果となった。
if else | switch case | ?: 三項演算 | |
---|---|---|---|
Opera 9.64 | 1100 | 1156 | 1112 |
Opera 11.10 | 173 | 166 | 161 |
Firefox 4.0 | 106 | 105 | 110 |
Chrome 10.0 | 91 | 73 | 73 |
過程
速度計測器となる以下の HTML を各ブラウザに読み込ませ、更新ボタンを押すごとに出力された数値を記録することを 5 回繰り返し、それらの平均の数値を基に上記の表を作成した。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>[JavaScript][bench] if else 文, switch case 文, ?: 三項演算</title> <script> window.onload = function() { // if else を行う一般的な関数サンプル function ifElse(){ var n = Math.random() * 6 | 0; if (n === 5) return "five"; else if (n === 4) return "four"; else if (n === 3) return "three"; else if (n === 2) return "two"; else if (n === 1) return "one"; else return "zero"; } // switch case を行う一般的な関数サンプル function switchCase() { var n = Math.random() * 6 | 0; switch (n) { case 5: return "five"; case 4: return "four"; case 3: return "three"; case 2: return "two"; case 1: return "one"; default: return "zero"; } } // 三項演算を行う一般的な関数サンプル function ternaryOperation() { var n = Math.random() * 6 | 0; return n === 5 ? "five": n === 4 ? "four": n === 3 ? "three": n === 2 ? "two": n === 1 ? "one": "zero"; } // 任意の関数を実行し速度を記録する関数 function bench(func) { document.getElementById("running_func").firstChild.nodeValue = func; for (var i = 9e5, start = new Date; --i;) func(); bench[func] = new Date - start; } // ベンチ実行 bench(ifElse); bench(switchCase); bench(ternaryOperation); // ベンチ結果出力 document.write( "<h1>結果</h1><dl>" + "<dt>if else" + "<dd>" + bench[ifElse] + "<dt>switch case" + "<dd>" + bench[switchCase] + "<dt>?:" + "<dd>" + bench[ternaryOperation] + "</dl>" ); }; </script> </head> <body> <p id="running_func">無</p> </body> </html>
ブラウザ別速度比較【第 N 章】 2 種類のクロージャ
概要
プログラミング言語 JavaScript における 2 種類のクロージャをさまざまな Web ブラウザで実行し、実行にかかった時間を記録する。
実行方法
ロケーションバーに以下のコードを入力して Enter キーを押す。
コード
以下 2 種類のコードを実行すると、いずれも、クロージャが 9e5 = 900000 回実行され、 alert dialog が出現し、かかった時間が表示される。
function 篇(一般によく使用される)
javascript: closure = (function(x) { return function() { return x++ }; })(0); for (time = new Date; closure() < 9e5;); alert(new Date - time)
with 篇(一般にあまり使用されない)
javascript: with ({x:0}) closure = function() { return x++ }; for (time = new Date; closure() < 9e5;); alert(new Date - time)
速度記録の詳細
上記 2 種類のコードをそれぞれ 5 回ずつ実行する。 5 回実行すれば、合計 5 つの alert dialog が出現することになる。 5 つの alert dialog にはそれぞれ数値が表示されているが、そのうち最小のものを「スコア」とする。ブラウザ別に「スコア」を記録し、表を作成する。
実行結果
ブラウザ | かかった時間 | |
---|---|---|
function 篇 | with 篇 | |
Opera 9.6 | 219 | 234 |
Opera 10.7 | 73 | 148 |
Firefox 3.6 | 154 | 306 |
Internet Explorer 8.0 | 640 | 640 |
Google Chrome 7.0 | 0 | 360 |
Safari 5.0 | 62 | 132 |
あとがき
function 篇では Chrome が最速で、 0 という追い抜きようのないスコアであった。一方、 with 篇では Safari が最速であった。これら 2 つのブラウザに搭載されている JavaScript エンジンは、どちらも同じく V8 と呼ばれており、ロボット型検索サイトの老舗 Google が開発したものである。
訂正: Chrome の JavaScript エンジンは V8 であるが、 Safari のそれは JavaScriptCore と呼ばれており、 Macintosh の生みの親である Apple が開発したものである。 http://mobile.twitter.com/@t_ashula/status/11760759650390016
今回の結果は、環境に左右されるものであり、絶対ではない。また、今回使用したブラウザは、いずれも、日々バージョンアップを続けており、 Opera に限っていえば、その進歩を表の中で見ることができる。とりわけ断言できそうなのは、クロージャを実現する際、 with 篇より function 篇を使ったほうが高い速度で実行できるということだ。
ブラウザ別速度比較 window, this, valueOf()
実行したコード
for (N = 0, I = 30; I--;) { for (n = new Date, i = 99999; --i;) window; N += new Date - n; } N / 30 | 0;
結果
かかった時間 | ||||
---|---|---|---|---|
ブラウザ | window | this | valueOf() | |
Firefox 3.6.8 | 31 | 23 | 241 | |
Opera 9.60 (10447) | 119 | 26 | 118 | |
Opera 10.70 (9047) | 32 | 8 | 67 | |
Google Chrome 5.0.375 | 20 | 1 | 23 | |
Internet Explorer 8.0.6001.18702 | 49 | 29 | TypeError: オブジェクトを指定してください。 |
BPM と一拍の長さ
※サンプル数の値は、Wave の周波数が 44100Hz の場合のもの
BPM | 1拍の長さ(秒) | 1拍のサンプル数※ |
---|---|---|
20 | 3 | 132300 |
21 | 2.857142857142857 | 126000 |
22 | 2.727272727272727 | 120272.72727272728 |
23 | 2.608695652173913 | 115043.47826086957 |
24 | 2.5 | 110250 |
25 | 2.4 | 105840 |
26 | 2.3076923076923075 | 101769.23076923077 |
27 | 2.2222222222222223 | 98000 |
28 | 2.142857142857143 | 94500 |
29 | 2.0689655172413794 | 91241.37931034483 |
30 | 2 | 88200 |
31 | 1.935483870967742 | 85354.83870967742 |
32 | 1.875 | 82687.5 |
33 | 1.8181818181818181 | 80181.81818181818 |
34 | 1.7647058823529411 | 77823.5294117647 |
35 | 1.7142857142857142 | 75600 |
36 | 1.6666666666666667 | 73500 |
37 | 1.6216216216216217 | 71513.51351351352 |
38 | 1.5789473684210527 | 69631.57894736843 |
39 | 1.5384615384615385 | 67846.15384615384 |
40 | 1.5 | 66150 |
41 | 1.4634146341463414 | 64536.58536585366 |
42 | 1.4285714285714286 | 63000 |
43 | 1.3953488372093024 | 61534.88372093023 |
44 | 1.3636363636363635 | 60136.36363636364 |
45 | 1.3333333333333333 | 58800 |
46 | 1.3043478260869565 | 57521.739130434784 |
47 | 1.2765957446808511 | 56297.87234042553 |
48 | 1.25 | 55125 |
49 | 1.2244897959183674 | 54000 |
50 | 1.2 | 52920 |
51 | 1.1764705882352942 | 51882.35294117647 |
52 | 1.1538461538461537 | 50884.61538461538 |
53 | 1.1320754716981132 | 49924.52830188679 |
54 | 1.1111111111111112 | 49000 |
55 | 1.0909090909090908 | 48109.09090909091 |
56 | 1.0714285714285714 | 47250 |
57 | 1.0526315789473684 | 46421.05263157895 |
58 | 1.0344827586206897 | 45620.68965517241 |
59 | 1.0169491525423728 | 44847.457627118645 |
60 | 1 | 44100 |
61 | 0.9836065573770492 | 43377.04918032787 |
62 | 0.967741935483871 | 42677.41935483871 |
63 | 0.9523809523809523 | 42000 |
64 | 0.9375 | 41343.75 |
65 | 0.9230769230769231 | 40707.692307692305 |
66 | 0.9090909090909091 | 40090.90909090909 |
67 | 0.8955223880597015 | 39492.53731343283 |
68 | 0.8823529411764706 | 38911.76470588235 |
69 | 0.8695652173913043 | 38347.82608695652 |
70 | 0.8571428571428571 | 37800 |
71 | 0.8450704225352113 | 37267.605633802814 |
72 | 0.8333333333333334 | 36750 |
73 | 0.821917808219178 | 36246.57534246575 |
74 | 0.8108108108108109 | 35756.75675675676 |
75 | 0.8 | 35280 |
76 | 0.7894736842105263 | 34815.78947368421 |
77 | 0.7792207792207793 | 34363.63636363636 |
78 | 0.7692307692307693 | 33923.07692307692 |
79 | 0.759493670886076 | 33493.670886075946 |
80 | 0.75 | 33075 |
81 | 0.7407407407407407 | 32666.666666666668 |
82 | 0.7317073170731707 | 32268.29268292683 |
83 | 0.7228915662650602 | 31879.518072289156 |
84 | 0.7142857142857143 | 31500 |
85 | 0.7058823529411765 | 31129.41176470588 |
86 | 0.6976744186046512 | 30767.441860465115 |
87 | 0.6896551724137931 | 30413.793103448275 |
88 | 0.6818181818181818 | 30068.18181818182 |
89 | 0.6741573033707865 | 29730.337078651686 |
90 | 0.6666666666666666 | 29400 |
91 | 0.6593406593406593 | 29076.923076923078 |
92 | 0.6521739130434783 | 28760.869565217392 |
93 | 0.6451612903225806 | 28451.612903225807 |
94 | 0.6382978723404256 | 28148.936170212764 |
95 | 0.631578947368421 | 27852.63157894737 |
96 | 0.625 | 27562.5 |
97 | 0.6185567010309279 | 27278.350515463917 |
98 | 0.6122448979591837 | 27000 |
99 | 0.6060606060606061 | 26727.272727272728 |
100 | 0.6 | 26460 |
101 | 0.594059405940594 | 26198.019801980197 |
102 | 0.5882352941176471 | 25941.176470588234 |
103 | 0.5825242718446602 | 25689.320388349515 |
104 | 0.5769230769230769 | 25442.30769230769 |
105 | 0.5714285714285714 | 25200 |
106 | 0.5660377358490566 | 24962.264150943396 |
107 | 0.5607476635514018 | 24728.971962616823 |
108 | 0.5555555555555556 | 24500 |
109 | 0.5504587155963303 | 24275.229357798165 |
110 | 0.5454545454545454 | 24054.545454545456 |
111 | 0.5405405405405406 | 23837.837837837837 |
112 | 0.5357142857142857 | 23625 |
113 | 0.5309734513274337 | 23415.929203539825 |
114 | 0.5263157894736842 | 23210.526315789473 |
115 | 0.5217391304347826 | 23008.695652173912 |
116 | 0.5172413793103449 | 22810.344827586207 |
117 | 0.5128205128205128 | 22615.384615384617 |
118 | 0.5084745762711864 | 22423.728813559323 |
119 | 0.5042016806722689 | 22235.29411764706 |
120 | 0.5 | 22050 |
121 | 0.49586776859504134 | 21867.76859504132 |
122 | 0.4918032786885246 | 21688.524590163935 |
123 | 0.4878048780487805 | 21512.19512195122 |
124 | 0.4838709677419355 | 21338.709677419356 |
125 | 0.48 | 21168 |
126 | 0.47619047619047616 | 21000 |
127 | 0.47244094488188976 | 20834.645669291338 |
128 | 0.46875 | 20671.875 |
129 | 0.46511627906976744 | 20511.627906976744 |
130 | 0.46153846153846156 | 20353.846153846152 |
131 | 0.4580152671755725 | 20198.47328244275 |
132 | 0.45454545454545453 | 20045.454545454544 |
133 | 0.45112781954887216 | 19894.736842105263 |
134 | 0.44776119402985076 | 19746.268656716416 |
135 | 0.4444444444444444 | 19600 |
136 | 0.4411764705882353 | 19455.882352941175 |
137 | 0.43795620437956206 | 19313.868613138686 |
138 | 0.43478260869565216 | 19173.91304347826 |
139 | 0.4316546762589928 | 19035.97122302158 |
140 | 0.42857142857142855 | 18900 |
141 | 0.425531914893617 | 18765.957446808512 |
142 | 0.4225352112676056 | 18633.802816901407 |
143 | 0.4195804195804196 | 18503.496503496503 |
144 | 0.4166666666666667 | 18375 |
145 | 0.41379310344827586 | 18248.275862068964 |
146 | 0.410958904109589 | 18123.287671232876 |
147 | 0.40816326530612246 | 18000 |
148 | 0.40540540540540543 | 17878.37837837838 |
149 | 0.40268456375838924 | 17758.389261744967 |
150 | 0.4 | 17640 |
151 | 0.3973509933774834 | 17523.17880794702 |
152 | 0.39473684210526316 | 17407.894736842107 |
153 | 0.39215686274509803 | 17294.117647058825 |
154 | 0.38961038961038963 | 17181.81818181818 |
155 | 0.3870967741935484 | 17070.967741935485 |
156 | 0.38461538461538464 | 16961.53846153846 |
157 | 0.3821656050955414 | 16853.503184713376 |
158 | 0.379746835443038 | 16746.835443037973 |
159 | 0.37735849056603776 | 16641.509433962263 |
160 | 0.375 | 16537.5 |
161 | 0.37267080745341613 | 16434.782608695652 |
162 | 0.37037037037037035 | 16333.333333333334 |
163 | 0.36809815950920244 | 16233.128834355828 |
164 | 0.36585365853658536 | 16134.146341463415 |
165 | 0.36363636363636365 | 16036.363636363636 |
166 | 0.3614457831325301 | 15939.759036144578 |
167 | 0.3592814371257485 | 15844.311377245509 |
168 | 0.35714285714285715 | 15750 |
169 | 0.35502958579881655 | 15656.804733727811 |
170 | 0.35294117647058826 | 15564.70588235294 |
171 | 0.3508771929824561 | 15473.684210526315 |
172 | 0.3488372093023256 | 15383.720930232557 |
173 | 0.3468208092485549 | 15294.797687861272 |
174 | 0.3448275862068966 | 15206.896551724138 |
175 | 0.34285714285714286 | 15120 |
176 | 0.3409090909090909 | 15034.09090909091 |
177 | 0.3389830508474576 | 14949.152542372882 |
178 | 0.33707865168539325 | 14865.168539325843 |
179 | 0.33519553072625696 | 14782.122905027933 |
180 | 0.3333333333333333 | 14700 |
181 | 0.3314917127071823 | 14618.78453038674 |
182 | 0.32967032967032966 | 14538.461538461539 |
183 | 0.32786885245901637 | 14459.016393442624 |
184 | 0.32608695652173914 | 14380.434782608696 |
185 | 0.32432432432432434 | 14302.702702702703 |
186 | 0.3225806451612903 | 14225.806451612903 |
187 | 0.32085561497326204 | 14149.732620320856 |
188 | 0.3191489361702128 | 14074.468085106382 |
189 | 0.31746031746031744 | 14000 |
190 | 0.3157894736842105 | 13926.315789473685 |
191 | 0.31413612565445026 | 13853.403141361257 |
192 | 0.3125 | 13781.25 |
193 | 0.31088082901554404 | 13709.844559585492 |
194 | 0.30927835051546393 | 13639.175257731958 |
195 | 0.3076923076923077 | 13569.23076923077 |
196 | 0.30612244897959184 | 13500 |
197 | 0.30456852791878175 | 13431.472081218275 |
198 | 0.30303030303030304 | 13363.636363636364 |
199 | 0.3015075376884422 | 13296.4824120603 |
200 | 0.3 | 13230 |
表生成ソース
<script> "use strict"; var freq = 44100; var min = 60; var smplmin = freq * min; var bpm = 20; var bpmlim = 200; var data = []; var beatsmp = 0; var beatsec = 0; for (;bpm <= bpmlim; ++bpm) { beatsmp = smplmin / bpm; beatsec = min / bpm; if (parseInt(beatsmp) === beatsmp) { beatsmp = "<em>" + beatsmp + "</em>"; } data[bpm] = "<tr>" + "<th>" + bpm + "</th>" + "<td>" + beatsec + "</td>" + "<td>" + beatsmp + "</td>" + "</tr>"; } document.write( "<xmp><p>※サンプル数の値は、Wave の周波数が 44100Hz の場合のもの</p>" + "<table>" + "<tr>" + "<th>BPM</th>" + "<th>1拍の長さ(秒)</th>" + "<th>1拍のサンプル数※</th>" + "</tr>" + data.join("") + "</table>"); </script>
BODY 要素 (document.body) へのアクセス速度比較
- ブラウザ
- Opera 9.6
- 場所
- http://0mg.github.com/tools/jseval/
for (n = +new Date, i = 99999; --i;) document.body; new Date - n
アクセス方法 | かかった時間 |
---|---|
document.body | 171 |
document.all[5] | 172 |
document.getElementsByTagName("body")[0] | 594 |
document.evaluate(".//body",document,null,9,null).singleNodeValue | 1890 |
document.evaluate(".//body",document,null,7,null).snapshotItem(0) | 2313 |
document.evaluate(".//body",document,null,5,null).iterateNext() | 5734 |
てすと2
てすと2の本文