Create timing.html

arkenfox · May 20, 2022 · 3cd3373 · 3cd3373
1 parent 91c0db1
commit 3cd3373
Showing 1 changed file with 159 additions and 0 deletions.
diff --git a/tests/timing.html b/tests/timing.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>timing</title>
+<style>
+.mono {font-family: monospace, "Courier New"; font-size: 11px; white-space: pre;}
+td {vertical-align: top;}
+.anim {
+  width: 5px;
+  height: 10px;
+  background-color: black;
+  position: relative;
+  animation-name: cssAnim;
+	animation-timing-function: linear;
+  animation-duration: 1s;
+}
+@keyframes cssAnim {
+	from {left: 0;}
+	to {left: 1000px;}
+}
+</style>
+</head>
+
+<body>
+<span><span id="anim"></span>&nbsp </span>
+
+<table width="600">
+<col width="18%"><col width="18%"><col width="18%"><col width="23%"><col width="23%">
+<tr>
+	<td>date<br>setInterval</td>
+	<td>date<br>setTimeout</td>
+	<td>performance<br>now</td>
+	<td>performance<br>timeOrigin</td>
+	<td>event<br>timeStamp</td>
+	<td>css<br>animation</td>
+</tr>
+<tr>
+	<td><button onClick="logInterval()">run</button></td>
+	<td><button onClick="runTimeout()">run</button></td>
+	<td><button onClick="logPerfnow()">run</button></td>
+	<td><button onClick="logPerforigin()">run</button></td>
+	<td><button onClick="logEventTS()">run</button></td>
+	<td><button onClick="logCss()">run</button></td>
+</tr>
+<tr>
+	<td id="outputa" class="mono">&nbsp </td>
+	<td id="outputb" class="mono">&nbsp </td>
+	<td id="outputc" class="mono">&nbsp </td>
+	<td id="outputf" class="mono">&nbsp </td>
+	<td id="outputd" class="mono">&nbsp </td>
+	<td id="outpute" class="mono">&nbsp </td>
+</tr>
+</table>
+
+<script>
+'use strict';
+
+function logPerforigin() {
+	let strf = "", i = 1, p0 = performance.timeOrigin;
+	function steak() {
+		if (i < 26) {
+			let p1 = performance.timeOrigin;
+			strf = strf + (p1-p0) +"<br>"; i++;
+		} else {
+			clearInterval(burger);
+		}
+		document.getElementById("outputf").innerHTML=strf;
+	};
+	let burger = setInterval(steak, 27);
+};
+
+
+function logInterval() {
+	let stra = "", i = 1;
+	function banana() {
+		if (i < 26) {
+			var todaya = new Date();
+			stra = stra + (todaya.getSeconds() +"."+ todaya.getMilliseconds() +"<br>"); i++;
+		} else {
+			clearInterval(cake);
+		}
+		document.getElementById("outputa").innerHTML=stra;
+	};
+	let cake = setInterval(banana, 31); // banana cake... yummm
+};
+
+var t = 1, strb="";
+function logTimeout() {
+  if (t < 26) {
+		var todayb = new Date();
+		strb = strb + (todayb.getSeconds() +"."+ todayb.getMilliseconds()) +"<br>";
+		var x = setTimeout(logTimeout, 27); t++;
+	};
+	document.getElementById("outputb").innerHTML=strb
+};
+function runTimeout() {
+	t = 1, strb="";
+	logTimeout();
+};
+
+function logPerfnow() {
+	let strc = "", i = 1, p0 = performance.now();
+	function steak() {
+		if (i < 26) {
+			let p1 = performance.now();
+			strc = strc + (p1-p0) +"<br>"; i++;
+		} else {
+			clearInterval(burger);
+		}
+		document.getElementById("outputc").innerHTML=strc;
+	};
+	let burger = setInterval(steak, 23);
+}
+
+function logEventTS() {
+	let strd = "", i = 1;
+	function french() {
+		if (i < 26) {
+			strd = strd + new Event('').timeStamp +"<br>"; i++;
+		} else {
+			clearInterval(fries);
+		}
+		document.getElementById("outputd").innerHTML=strd;
+	};
+	let fries = setInterval(french, 37);
+}
+
+function logCss() {
+	let stre ="",
+		c = "", // current
+		p = "", // previous
+		i=1;
+	let el = document.getElementById("anim");
+	let z = el.getBoundingClientRect().left; // starting left position
+	el.classList.add("anim"); // load class
+	function steak() {
+		if (i < 101) {
+			let rect = el.getBoundingClientRect();
+			let c = rect.left;
+			if (c !== z) {
+				if (c !== p ) {
+					stre = stre + (Math.round(c) - z) +"<br>";
+					p = c;
+				}
+			}
+			i++;
+		} else {
+			clearInterval(burger);
+			document.getElementById("anim").classList.remove("anim"); // unload class
+		}
+		document.getElementById("outpute").innerHTML=stre;
+	};
+	let burger = setInterval(steak, 10);
+}
+
+</script>
+</body>
+</html>