Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/selectorPerformanceTest.html

Created July 26, 2019 14:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cferdinandi/f9bbdd43a264e7201abd07a5c4a9dcaf to your computer and use it in GitHub Desktop.
Save cferdinandi/f9bbdd43a264e7201abd07a5c4a9dcaf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
selectorPerformanceTest.html
<!DOCTYPE html>
<html>
<head>
<title>localStorage Performance Test</title>
</head>
<body>
<ul id="app"></ul>
<script>
// Variables
var app = document.querySelector('#app');
var count = 10000;
var elem;
// Create elements
for (var i = 0; i < count; i++) {
// Create element
elem = document.createElement('li');
elem.textContent = 'List Item ' + i;
// Add ID, class, and data attribute
elem.id = 'list-item-' + i;
elem.className = 'list-item list-item-' + i;
elem.setAttribute('data-item', i);
// Inject into the DOM
app.appendChild(elem);
}
/**
* Start Performance Tests
*/
var i;
// ID
console.time('ID');
for (i = 0; i < count; i++) {
document.querySelector('#list-item-' + i);
}
console.timeEnd('ID');
// By Class
console.time('Class');
for (i = 0; i < count; i++) {
document.querySelector('.list-item-' + i);
}
console.timeEnd('Class');
// By Data Attribute
console.time('Data Atrribute');
for (i = 0; i < count; i++) {
document.querySelector('[data-item="' + i + '"]');
}
console.timeEnd('Data Atrribute');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment