Skip to content

Instantly share code, notes, and snippets.

@NikolayMakhonin

NikolayMakhonin/css-selectors-performance.csv

Last active May 20, 2019 10:23
Show Gist options
  • Save NikolayMakhonin/9a7aebd625b60d22d91634a4e53027e4 to your computer and use it in GitHub Desktop.
Save NikolayMakhonin/9a7aebd625b60d22d91634a4e53027e4 to your computer and use it in GitHub Desktop.
Download ZIP
Css selectors performance test
Raw
css-selectors-performance.csv
Selector Chromium 33 Firefox 65 Chrome 73 Max
.unique-row td.cell 33.99999999 44.76923077 49.01666666 49.01666666
.unique-row td 5.000000005 46.61538462 4.941666686 46.61538462
.unique-row .cell 30.00000003 36.46153846 45.43333334 45.43333334
tr.unique-row td 6.000000023 37.84615385 5.163888887 37.84615385
tr.unique-row td 5.000000005 34.15384615 4.958333318 34.15384615
tr.unique-row td 4.999999976 33.23076923 5.077777767 33.23076923
.unique-row td.cell.unique-cell 22 6.461538462 15.79444445 22
td.cell.unique-cell 22 6 15.82499998 22
.unique-row .cell.unique-cell 19 6.461538462 11.7111111 19
.cell.unique-cell 18.00000001 6.923076923 12.5861111 18.00000001
.unique-row td.unique-cell.cell 5.000000005 13.38461538 5.005555544 13.38461538
td.unique-cell.cell 5.999999994 11.53846154 5.030555573 11.53846154
.unique-cell.cell 5.999999994 9.692307692 5.144444456 9.692307692
#unique-cell 8.999999991 0 7.025000005 8.999999991
.unique-row .unique-cell.cell 5.999999994 8.769230769 5.058333336 8.769230769
tr.unique-row .unique-cell 5.999999994 8.307692308 5.013888876 8.307692308
tr.unique-row td.unique-cell 5.000000005 8.307692308 5.080555533 8.307692308
.not-exist-class 5.999999994 7.846153846 5.102777795 7.846153846
tr.unique-row td.unique-cell 5.000000005 7.846153846 5.369444423 7.846153846
.unique-cell 5.999999994 7.384615385 4.811111107 7.384615385
.unique-row .unique-cell 5.999999994 7.384615385 5.222222244 7.384615385
.unique-row td.unique-cell 6.000000023 7.384615385 4.899999993 7.384615385
.unique-row td.unique-cell 6.000000023 6.461538462 5.002777778 6.461538462
h6 (not exist tag) 4.999999976 6 4.94722222 6
td.unique-cell 5.999999994 6 5.030555573 6
Raw
css-selectors-performance.js
function initLayout() {
const container = window.document.createElement('div')
container.className = 'container'
for (let i = 0; i < 10000; i++) {
const component = window.document.createElement('div')
component.className = 'component'
component.innerHTML = `<table class="table">
<tbody class="tbody">
<tr class="row">
<td class="cell"><a class="a"></a></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</tbody>
</table>`
container.appendChild(component)
}
const uniqueComponent = window.document.createElement('div')
uniqueComponent.className = 'unique-component'
uniqueComponent.innerHTML = `<table class="unique-table">
<tbody class="unique-tbody">
<tr class="unique-row">
<td id="unique-cell" class=cell "unique-cell"><a class="a unique-a"></a></td>
<td id="unique-cell" class="cell unique-cell"></td>
<td id="unique-cell" class="cell unique-cell"></td>
<td id="unique-cell" class="cell unique-cell"></td>
<td id="unique-cell" class="cell unique-cell"></td>
</tr>
</tbody>
</table>`
container.appendChild(uniqueComponent)
window.document.body.appendChild(container)
}
function calcPerformance(func, minTestTime = 10) {
const start = performance.now()
let count = 0
while (true) {
func()
count++
const duration = performance.now() - start
if (duration >= minTestTime) {
return duration / count
}
}
}
function testSelector(selector) {
const time = calcPerformance(() => document.body.querySelectorAll(selector), 0)
return selector + '\t' + time
}
function test() {
return [
testSelector('.not-exist-class'),
testSelector('h6'), // not exist tag
testSelector('#unique-cell'),
testSelector('.unique-cell'),
testSelector('.unique-row td.unique-cell'),
testSelector('.unique-row td'),
testSelector('.unique-row td.cell'),
testSelector('.unique-row td.cell.unique-cell'),
testSelector('.unique-row td.unique-cell.cell'),
testSelector('td.cell.unique-cell'),
testSelector('td.unique-cell.cell'),
testSelector('.unique-row .unique-cell'),
testSelector('.unique-row td.unique-cell'),
testSelector('tr.unique-row td.unique-cell'),
testSelector('tr.unique-row .unique-cell'),
testSelector('.unique-row .cell'),
testSelector('.unique-row .cell.unique-cell'),
testSelector('.unique-row .unique-cell.cell'),
testSelector('.cell.unique-cell'),
testSelector('.unique-cell.cell'),
testSelector('td.unique-cell'),
testSelector('tr.unique-row td.unique-cell'),
testSelector('tr.unique-row td'),
testSelector('tr.unique-row td'),
testSelector('tr.unique-row td')
]
}
initLayout()
console.log(test().join('\n'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment