stestagg · August 1, 2016 23:35
diff --git a/index.html b/index.html
 <style>.ww{word-break: break-all;}</style>

 <body>
 <div id="x" class=""></div>

 <script>

 function n_rand(n){
 	var str = "";
 	while (str.length < n) {
 		str += Math.random().toString(36).slice(2);
 	}
 	return str.slice(0, n);
 }

 !function() {
 	"use strict";
 	var test_list = [];
 	var results = {"break": [], "nobreak":[]};
 	var cycle_results = results['nobreak'];
 	var cycle_1 = true;

 	for (var i=32000; i>=1000; i -= 4000) { test_list.push(i); }
 	var tests = test_list.slice();
 	var x_elm = document.getElementById("x");
 	function next_test() {
 		var test = tests.pop();
 		if (!test) { return cycle_ended(); }
 		var data = n_rand(test);
 		var before = performance.now();
 		x_elm.textContent = data;
 		window.requestAnimationFrame(function() {
 			var after = performance.now();
 			console.log("Test", data.length, after-before);
 			cycle_results.push(parseInt(after-before, 10));
 			requestAnimationFrame(clear_and_next);
 		})
 	}
 	function clear_and_next(){
 		x_elm.textContent = "";
 		requestAnimationFrame(next_test);
 	}

 	function cycle_ended() {
 		if (cycle_1 == true){
 			cycle_1 = false;
 			tests = test_list.slice();
 			console.log(tests);
 			x_elm.className = "ww";
 			cycle_results = results['break'];
 			clear_and_next();
 		} else {
 			console.log(JSON.stringify(results));
 			console.log(test_list);
 			draw_results();
 		}
 	}

 	function draw_results() {
 		var container = document.createElement("img");
 		test_list.reverse();

 		container.src=("https://chart.googleapis.com/chart?cht=lc&chs=600x400&chds=a&chdl=nobreak|break&chco=00ff00,ff0000&"
 			+ "chtt=Time to layout n chars in a div&"
 			+ "chd=t:"
 			+ results.nobreak.join(",")
 			+"|"
 			+ results.break.join(",")
 			+"&chxt=x,x,y,y&chxl=0:|"
 			+ test_list.join("|")
 			+ "|1:|Num Chars|3:|Milliseconds"
 		);
 		document.body.appendChild(container);

 	}

 	next_test();
 }();

 </script>

 </body>
	<style>.ww{word-break: break-all;}</style>

	<body>
	<div id="x" class=""></div>

	<script>

	function n_rand(n){
	var str = "";
	while (str.length < n) {
	str += Math.random().toString(36).slice(2);
	}
	return str.slice(0, n);
	}

	!function() {
	"use strict";
	var test_list = [];
	var results = {"break": [], "nobreak":[]};
	var cycle_results = results['nobreak'];
	var cycle_1 = true;

	for (var i=32000; i>=1000; i -= 4000) { test_list.push(i); }
	var tests = test_list.slice();
	var x_elm = document.getElementById("x");
	function next_test() {
	var test = tests.pop();
	if (!test) { return cycle_ended(); }
	var data = n_rand(test);
	var before = performance.now();
	x_elm.textContent = data;
	window.requestAnimationFrame(function() {
	var after = performance.now();
	console.log("Test", data.length, after-before);
	cycle_results.push(parseInt(after-before, 10));
	requestAnimationFrame(clear_and_next);
	})
	}
	function clear_and_next(){
	x_elm.textContent = "";
	requestAnimationFrame(next_test);
	}

	function cycle_ended() {
	if (cycle_1 == true){
	cycle_1 = false;
	tests = test_list.slice();
	console.log(tests);
	x_elm.className = "ww";
	cycle_results = results['break'];
	clear_and_next();
	} else {
	console.log(JSON.stringify(results));
	console.log(test_list);
	draw_results();
	}
	}

	function draw_results() {
	var container = document.createElement("img");
	test_list.reverse();

	container.src=("https://chart.googleapis.com/chart?cht=lc&chs=600x400&chds=a&chdl=nobreak\|break&chco=00ff00,ff0000&"
	+ "chtt=Time to layout n chars in a div&"
	+ "chd=t:"
	+ results.nobreak.join(",")
	+"\|"
	+ results.break.join(",")
	+"&chxt=x,x,y,y&chxl=0:\|"
	+ test_list.join("\|")
	+ "\|1:\|Num Chars\|3:\|Milliseconds"
	);
	document.body.appendChild(container);

	}

	next_test();
	}();

	</script>

	</body>