rcocks.github.io/index.html at master · rcocks/rcocks.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Benchmarking Javascript</title>
	<script type="text/javascript">


	function loopFunction(f, count){
		window.total = 0;
		document.getElementById("hdnNumber").value = 0;
		var begin = performance.now();
		for(var i = 0; i < count; i++){
			f();
		}
		var end =  performance.now() - begin;
		return end;
	}


	function Loop(f, count, interval, usesDom){
		return setInterval(function(){
				var t = loopFunction(f, count);

				var timingFinished = new CustomEvent('timing',{
					detail:{
						timing: t,
						DOMaccess: usesDom
					}
				});

				document.dispatchEvent(timingFinished);

			}, interval);
	}


	document.addEventListener('timing', function(e){
		//document.body.insertAdjacentHTML('beforeend',"<p>time taken: " + e.detail.timing + "<br>DOM access: " + e.detail.DOMaccess +  "</p>");
		document.body.insertAdjacentHTML('beforeend','<pre>'+JSON.stringify(e.detail, null, 2)+"</pre>");
		if(!e.detail.DOMaccess){
			if(window.timer1Count++ > 5) window.clearInterval(window.timer1);
		} else {
			if(window.timer2Count++ > 5) window.clearInterval(window.timer2);
		}
	}, false);

	window.onload = function(){


		var f1 = function(){
			var a = Math.random();
			window.total += a;
		}

		var f2 = function(){
			var a = Math.random();
			var hdn = document.getElementById("hdnNumber");
			hdn.value = parseFloat(hdn.value) + a;
		}

		window.timer1Count = 0;
		window.timer1 = Loop(f1, 100000, 500, false);

		window.timer2Count = 0;
		window.timer2 = Loop(f2, 100000, 500, true);
	}
	</script>
</head>
<body>
	<input type="hidden" id="hdnNumber" value="0">
</body>
</html>