Skip to content

Instantly share code, notes, and snippets.

@tagliala

tagliala/3.2.1.html

Created October 16, 2013 15:18
Show Gist options
  • Save tagliala/7009411 to your computer and use it in GitHub Desktop.
Save tagliala/7009411 to your computer and use it in GitHub Desktop.
Download ZIP
How to profile CSS selectors?
Raw
3.2.1.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>FA 3.2.1 performance test</title>
<script src="js/test.js"></script>
<link rel="stylesheet" href="css/font-awesome.3.2.1.min.css">
</head>
<body onload="test()" id="body" data-icon-class="icon"></body>
</html>
Raw
4.0.0.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>FA 4.0.0 performance test</title>
<script src="js/test.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body onload="test()" id="body" data-icon-class="fa-icon fa-icon"></body>
</html>
Raw
test.js
test = function() {
elapsed = []
body = document.getElementById('body');
iconHTML = '<i class="' + body.getAttribute('data-icon-class') + '-glass"></i><i class="' + body.getAttribute('data-icon-class') + '-star"></i><i class="' + body.getAttribute('data-icon-class') + '-home"></i>';
for (i = 0, l = 5; i < l; ++i) {
start = new Date().getTime();
for(j = 0, k = 10000; j < k; ++j) {
body.innerHTML = iconHTML;
forceRendering = body.offsetWidth + body.offsetHeight;
body.innerHTML = '';
}
stop = new Date().getTime();
elapsed.push(stop - start);
}
sum = 0
for (i = 0, l = elapsed.length; i < l; ++i) {
sum += elapsed[i];
}
body.innerHTML = iconHTML;
body.innerHTML += '<br>';
body.innerHTML += (sum / elapsed.length) + 'ms';
return;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment