Run results for: className const/cached/new regex, classList contains, className split includes, className indexOf scan

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Browser: Chrome 102

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
className const regex	5788673.5 Ops/sec
className cached regex	3976302.2 Ops/sec
className new regex	2084503.8 Ops/sec
classList contains	5763761.5 Ops/sec
className split includes	1927592.2 Ops/sec
className indexOf scan	5942290.5 Ops/sec

Script Preparation code:

var el = document.createElement('div');
el.className = 'foo bar baz hello world';
var xs = 'hello';
var xre = new RegExp('\\b' + xs + '\\b');
var cache = new Map();

Tests:

className const regex
return xre.test(el.className);
className cached regex
let s = xs; // ensure local var instead of closure var let re = cache.get(s); if (!re) { re = new RegExp('\\b' + s + '\\b'); cache.set(s, re); } return re.test(el.className);
className new regex
return new RegExp('\\b' + xs + '\\b').test(el.className);
classList contains
return el.classList.contains(xs);
className split includes
return el.className.split(' ').includes(xs);
className indexOf scan
let s = xs; // ensure local var instead of closure var let c = el.className; let sl = s.length; let cl = c.length; let i = c.indexOf(s); //console.debug(i); if (i === 0) { let j = i + sl; if (j === cl || c[j] === ' ') return true; } while (i !== -1) { let j = i + sl; if (c[i - 1] === ' ' && (j === cl || c[j] === ' ')) return true; i = c.indexOf(s, j + 1); //console.debug(i); } return false;

Run results for: className const/cached/new regex, classList contains, className split includes, className indexOf scan

className const regex

className cached regex

className new regex

classList contains

className split includes

className indexOf scan