0B

ブラウザ別DOM実装差異 〜new Option, innerText〜

JavaScript DOM

環境

予備知識

JS 式実体
new Option("text","value")HTML 要素 <option value="value">text</option>
Option("text","value")
document.body.innerText"some 文字列"
document.body.textContent

実装状況

new OptionOption()innerTexttextContent
Firefox 16OKOKNGOK
Opera 12OKOKOKOK
Iron 22OKNGOKOK
IE 8OKNGOKNG

ブラウザ別 JavaScript 速度計測 if else 文, switch case 文, ?: 三項演算

JavaScript bench

目的

JavaScript で、以下の似たもの三種類の速度の違いを知る。

  • if else 文
  • switch case 文
  • ?: 三項演算

結果

ブラウザ別に速度を計測したところ、以下の結果となった。

if elseswitch case?: 三項演算
Opera 9.64110011561112
Opera 11.10173166161
Firefox 4.0106105110
Chrome 10.0917373

過程

速度計測器となる以下の 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

概要

プログラミング言語 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.6219234
Opera 10.773148
Firefox 3.6154306
Internet Explorer 8.0640640
Google Chrome 7.00360
Safari 5.062132

あとがき

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()

javascript

場所

http://0mg.github.com/tools/jseval/

実行したコード

for (N = 0, I = 30; I--;) {
  for (n = new Date, i = 99999; --i;) window;
  N += new Date - n;
}
N / 30 | 0;

結果

かかった時間
ブラウザwindowthisvalueOf()
Firefox 3.6.83123241
Opera 9.60 (10447)11926118
Opera 10.70 (9047)32867
Google Chrome 5.0.37520123
Internet Explorer 8.0.6001.187024929TypeError: オブジェクトを指定してください。

BPM と一拍の長さ

math music

※サンプル数の値は、Wave の周波数が 44100Hz の場合のもの

BPM1拍の長さ(秒)1拍のサンプル数※
203132300
212.857142857142857126000
222.727272727272727120272.72727272728
232.608695652173913115043.47826086957
242.5110250
252.4105840
262.3076923076923075101769.23076923077
272.222222222222222398000
282.14285714285714394500
292.068965517241379491241.37931034483
30288200
311.93548387096774285354.83870967742
321.87582687.5
331.818181818181818180181.81818181818
341.764705882352941177823.5294117647
351.714285714285714275600
361.666666666666666773500
371.621621621621621771513.51351351352
381.578947368421052769631.57894736843
391.538461538461538567846.15384615384
401.566150
411.463414634146341464536.58536585366
421.428571428571428663000
431.395348837209302461534.88372093023
441.363636363636363560136.36363636364
451.333333333333333358800
461.304347826086956557521.739130434784
471.276595744680851156297.87234042553
481.2555125
491.224489795918367454000
501.252920
511.176470588235294251882.35294117647
521.153846153846153750884.61538461538
531.132075471698113249924.52830188679
541.111111111111111249000
551.090909090909090848109.09090909091
561.071428571428571447250
571.052631578947368446421.05263157895
581.034482758620689745620.68965517241
591.016949152542372844847.457627118645
60144100
610.983606557377049243377.04918032787
620.96774193548387142677.41935483871
630.952380952380952342000
640.937541343.75
650.923076923076923140707.692307692305
660.909090909090909140090.90909090909
670.895522388059701539492.53731343283
680.882352941176470638911.76470588235
690.869565217391304338347.82608695652
700.857142857142857137800
710.845070422535211337267.605633802814
720.833333333333333436750
730.82191780821917836246.57534246575
740.810810810810810935756.75675675676
750.835280
760.789473684210526334815.78947368421
770.779220779220779334363.63636363636
780.769230769230769333923.07692307692
790.75949367088607633493.670886075946
800.7533075
810.740740740740740732666.666666666668
820.731707317073170732268.29268292683
830.722891566265060231879.518072289156
840.714285714285714331500
850.705882352941176531129.41176470588
860.697674418604651230767.441860465115
870.689655172413793130413.793103448275
880.681818181818181830068.18181818182
890.674157303370786529730.337078651686
900.666666666666666629400
910.659340659340659329076.923076923078
920.652173913043478328760.869565217392
930.645161290322580628451.612903225807
940.638297872340425628148.936170212764
950.63157894736842127852.63157894737
960.62527562.5
970.618556701030927927278.350515463917
980.612244897959183727000
990.606060606060606126727.272727272728
1000.626460
1010.59405940594059426198.019801980197
1020.588235294117647125941.176470588234
1030.582524271844660225689.320388349515
1040.576923076923076925442.30769230769
1050.571428571428571425200
1060.566037735849056624962.264150943396
1070.560747663551401824728.971962616823
1080.555555555555555624500
1090.550458715596330324275.229357798165
1100.545454545454545424054.545454545456
1110.540540540540540623837.837837837837
1120.535714285714285723625
1130.530973451327433723415.929203539825
1140.526315789473684223210.526315789473
1150.521739130434782623008.695652173912
1160.517241379310344922810.344827586207
1170.512820512820512822615.384615384617
1180.508474576271186422423.728813559323
1190.504201680672268922235.29411764706
1200.522050
1210.4958677685950413421867.76859504132
1220.491803278688524621688.524590163935
1230.487804878048780521512.19512195122
1240.483870967741935521338.709677419356
1250.4821168
1260.4761904761904761621000
1270.4724409448818897620834.645669291338
1280.4687520671.875
1290.4651162790697674420511.627906976744
1300.4615384615384615620353.846153846152
1310.458015267175572520198.47328244275
1320.4545454545454545320045.454545454544
1330.4511278195488721619894.736842105263
1340.4477611940298507619746.268656716416
1350.444444444444444419600
1360.441176470588235319455.882352941175
1370.4379562043795620619313.868613138686
1380.4347826086956521619173.91304347826
1390.431654676258992819035.97122302158
1400.4285714285714285518900
1410.42553191489361718765.957446808512
1420.422535211267605618633.802816901407
1430.419580419580419618503.496503496503
1440.416666666666666718375
1450.4137931034482758618248.275862068964
1460.41095890410958918123.287671232876
1470.4081632653061224618000
1480.4054054054054054317878.37837837838
1490.4026845637583892417758.389261744967
1500.417640
1510.397350993377483417523.17880794702
1520.3947368421052631617407.894736842107
1530.3921568627450980317294.117647058825
1540.3896103896103896317181.81818181818
1550.387096774193548417070.967741935485
1560.3846153846153846416961.53846153846
1570.382165605095541416853.503184713376
1580.37974683544303816746.835443037973
1590.3773584905660377616641.509433962263
1600.37516537.5
1610.3726708074534161316434.782608695652
1620.3703703703703703516333.333333333334
1630.3680981595092024416233.128834355828
1640.3658536585365853616134.146341463415
1650.3636363636363636516036.363636363636
1660.361445783132530115939.759036144578
1670.359281437125748515844.311377245509
1680.3571428571428571515750
1690.3550295857988165515656.804733727811
1700.3529411764705882615564.70588235294
1710.350877192982456115473.684210526315
1720.348837209302325615383.720930232557
1730.346820809248554915294.797687861272
1740.344827586206896615206.896551724138
1750.3428571428571428615120
1760.340909090909090915034.09090909091
1770.338983050847457614949.152542372882
1780.3370786516853932514865.168539325843
1790.3351955307262569614782.122905027933
1800.333333333333333314700
1810.331491712707182314618.78453038674
1820.3296703296703296614538.461538461539
1830.3278688524590163714459.016393442624
1840.3260869565217391414380.434782608696
1850.3243243243243243414302.702702702703
1860.322580645161290314225.806451612903
1870.3208556149732620414149.732620320856
1880.319148936170212814074.468085106382
1890.3174603174603174414000
1900.315789473684210513926.315789473685
1910.3141361256544502613853.403141361257
1920.312513781.25
1930.3108808290155440413709.844559585492
1940.3092783505154639313639.175257731958
1950.307692307692307713569.23076923077
1960.3061224489795918413500
1970.3045685279187817513431.472081218275
1980.3030303030303030413363.636363636364
1990.301507537688442213296.4824120603
2000.313230

表生成ソース

<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) へのアクセス速度比較

javascript dom
ブラウザ
Opera 9.6
場所
http://0mg.github.com/tools/jseval/
for (n = +new Date, i = 99999; --i;) document.body;
new Date - n

五回実行中最短時間採用
アクセス方法かかった時間
document.body171
document.all[5]172
document.getElementsByTagName("body")[0]594
document.evaluate(".//body",document,null,9,null).singleNodeValue1890
document.evaluate(".//body",document,null,7,null).snapshotItem(0)2313
document.evaluate(".//body",document,null,5,null).iterateNext()5734