crazy4groovy
9/15/2014 - 6:17 PM

Test refresh DOM performance in various browsers.

Test refresh DOM performance in various browsers.

refreshListDOMTest.html
content_copyfile_download
<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				min-height: 2000px;
			}
			.book {
				height: 78px;
				padding: 5px;
				margin: 5px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" id="times" size="4" value="500"/> books
			<br>
			<input type="checkbox" id="optimized"/> page refresh only once; 
			<input type="checkbox" id="cached"/> cache book html
			<br>
			<input type="checkbox" id="fakeBusy"/> mock html generation delays;
			<input type="checkbox" id="scroll"/> track scroll height/position
		</div>
		<br/>
		<button onclick="displayBooks()">Go</button> (console logged timers)
		<div id="timer"></div>
		<div id="container"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

<script type="text/javascript">

var HTML = "<div class='book'><span>The</span> Book ~i~</div>";
var startTime;
var fakeBusy;
var trackScroll;
var cache = {};

setInterval( function() {
	trackScroll = $('#scroll:checked').length === 1;
}, 500);

function displayBooks () {
	var el = $('#container');
	var numBooks = +($('#times').val() || 100);
	var optimized = $('#optimized:checked').length === 1;
	var cached = $('#cached:checked').length === 1;
	fakeBusy = $('#fakeBusy:checked').length === 1;
	
	var _htmls_optimized = "";
	var _html;
	
	startTime = false;
	el.html("");
	
	console.log(numBooks);
	console.log(optimized);
	console.log(cached);
	console.log(fakeBusy);
	
	if (numBooks > 500 && !optimized && !cached && fakeBusy) {
		if(!confirm('Very high count number > 500 - OK to continue, or Cancel?!')) return;
	}
	
	for (var i = numBooks; i > 0; i--) {
		//////////////////////CACHE///////////////////////
		if (cached) {
			if (!cache[''+i]) {
				cache[''+i] = getBookHTML(i);
				doFakeBusy(); // busy loop
			}
			_html = cache[''+i];
		}
		else {
			_html = getBookHTML(i);
			doFakeBusy(); // busy loop
		}
		
		//////////////////REFRESH PAGE////////////////////
		optimized ? (_htmls_optimized += _html) : el.html(el.html() + _html);
		
		displayTime(false, "book render");
	}
	
	//////////////////REFRESH PAGE////////////////////
	if (optimized) el.html(_htmls_optimized);
	
	setTimeout(displayTime, 1);
}

function getBookHTML(i) {
	return HTML.replace(/~i~/g, i);
}

function doFakeBusy(ms) {
	if (!fakeBusy) return;
	
	/////////////////PROCESSING DELAY////////////////
	ms = ms || 2;
	
	var dt = new Date();
	dt.setTime(dt.getTime() + ms);
	while (new Date().getTime() < dt.getTime());
}

function displayTime(newLine, msg) {
	newLine = newLine !== false;
	msg = msg || "Done page render ";
	
	if (!startTime) {
		startTime = new Date().getTime();
	}
	
	var diff = (new Date().getTime() - startTime) + 'ms';
	if (newLine) console.log('---');
	console.log(msg + "@" + diff);
	if (newLine) console.log('---');
}


window.onscroll = function(event) {
	if (!trackScroll) return;
	
	console.log("Y:" + window.scrollY + ";TotalY:" + (window.scrollMaxY || document.body.scrollHeight) + ";ViewY:" + window.innerHeight);
}

</script>
	</body>
</html>