mikecao/Chrome 50 rendering performance.html

## Chrome 50 rendering performance.html
<!doctype html>
<html>
<head>
<style>
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    width: 800px;
    height: 600px;
    border: 1px solid gray;
}

#spinner {
    visibility: hidden;
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

#spinner::before {
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    content: '\0020';
    width: 300px;
    height: 300px;
    border: 3px solid black;
    border-radius: 100%;
    opacity: 0.5;
    box-shadow: 5px 5px 10px;
    animation: rotate .6s linear infinite;
}

#spinner::after {
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    content: '\0020';
    width: 300px;
    height: 300px;
    border-top: 3px solid red;
    border-bottom: 3px solid blue;
    border-left: 3px solid green;
    border-right: 3px solid yellow;
    border-radius: 100%;
    opacity: 0.9;
    animation: rotate .3s linear infinite;
}

#fps {
    color: #fff;
    background-color: #000;
    padding: 10px;
    -webkit-app-region: drag;
}

.show {
    visibility: visible !important;
}

@keyframes rotate {
    0% {
        transform: rotateZ(-360deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
</style>
</head>
<body>
<div id="fps"></div>
<a href="javascript:toggle()">Toggle visibility</a><br>
<a href="javascript:remove()">Remove</a>
<div id="container">
    <div id="spinner" class="show"></div>
    <div id="t"></div>
</div>
<script>
var time = performance.now();
var frames = 0;

function toggle() {
    document.getElementById("spinner").classList.toggle('show');
}

function remove() {
    document.getElementById("spinner").remove();
}

function render() {
    var now = performance.now();
    var ms = now - time;
    frames = frames + 1;
    if (ms > 100) {
        document.getElementById("fps").innerText = Math.round((1000 * frames) / ms) + ' FPS';
        time = now;
        frames = 0;
    }
    document.getElementById("t").innerText = ~~now;
    requestAnimationFrame(render);
}

render();
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

	#container {
	position: relative;
	width: 800px;
	height: 600px;
	border: 1px solid gray;
	}

	#spinner {
	visibility: hidden;
	position: absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
	}

	#spinner::before {
	position: absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
	content: '\0020';
	width: 300px;
	height: 300px;
	border: 3px solid black;
	border-radius: 100%;
	opacity: 0.5;
	box-shadow: 5px 5px 10px;
	animation: rotate .6s linear infinite;
	}

	#spinner::after {
	position: absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
	content: '\0020';
	width: 300px;
	height: 300px;
	border-top: 3px solid red;
	border-bottom: 3px solid blue;
	border-left: 3px solid green;
	border-right: 3px solid yellow;
	border-radius: 100%;
	opacity: 0.9;
	animation: rotate .3s linear infinite;
	}

	#fps {
	color: #fff;
	background-color: #000;
	padding: 10px;
	-webkit-app-region: drag;
	}

	.show {
	visibility: visible !important;
	}

	@keyframes rotate {
	0% {
	transform: rotateZ(-360deg);
	}
	100% {
	transform: rotateZ(0deg);
	}
	}
	</style>
	</head>
	<body>
	<div id="fps"></div>
	<a href="javascript:toggle()">Toggle visibility</a><br>
	<a href="javascript:remove()">Remove</a>
	<div id="container">
	<div id="spinner" class="show"></div>
	<div id="t"></div>
	</div>
	<script>
	var time = performance.now();
	var frames = 0;

	function toggle() {
	document.getElementById("spinner").classList.toggle('show');
	}

	function remove() {
	document.getElementById("spinner").remove();
	}

	function render() {
	var now = performance.now();
	var ms = now - time;
	frames = frames + 1;
	if (ms > 100) {
	document.getElementById("fps").innerText = Math.round((1000 * frames) / ms) + ' FPS';
	time = now;
	frames = 0;
	}
	document.getElementById("t").innerText = ~~now;
	requestAnimationFrame(render);
	}

	render();
	</script>
	</body>
	</html>