MeasureThat.net

Run results for: Splti vs Trim vs replace className

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Chrome 133
Windows
Desktop
2 months ago
Test name Executions per second
Split + filter Classname 5821.8 Ops/sec
Trim + replace ClassName 9503.6 Ops/sec
No Trim - Replace CLassName 7192.6 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="foo" class="bar test    space  OK"></div>
Script Preparation code:
 
/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}
Tests:

  • Split + filter Classname

     
    let element = document.getElementById("foo");
    let i = 1000;
    while (i--) {
        const classes = element.className.split(/\s+/g)
        if (classes.length) {
              let selector = `${classes.join('.')}`;
              if (selector.endsWith('.')) {
                selector = `.${selector.slice(0, -1)}`;
              }
        }
    }

  • Trim + replace ClassName

     
    let element = document.getElementById("foo");
    let i = 1000;
    while (i--) {
        let selector = "." + element.className.trim().replace(/\s+/g, '.');
    }

  • No Trim - Replace CLassName

     
    let element = document.getElementById("foo");
    let i = 1000;
    while (i--) {
        let selector = "." + element.className.replace(/\s+/g, '.');
        if (selector.endsWith('.')) {
          selector = selector.slice(0, -1);
        }
    }