Run results for: RegExp vs String vs Arrays manipulation for paths

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

String Implementation

16.7M/s

RegExp Implementation

1.9M/s

Array Implementation

1.8M/s

View exact numbers

Test name	Executions per second
✓ String Implementation	16,665,818 Ops/sec
RegExp Implementation	1,905,103 Ops/sec
Array Implementation	1,763,812 Ops/sec

Script Preparation code:

const routes = [{
        path: '/user/1234',
        content: 'User 1234'
    },
    {
        path: '/event/5678/pictures/starred',
        content: 'Event Pictures'
    },
    {
        path: '/events',
        content: 'Events'
    },
];

function routeResolverRegex(path) {
    function normalizePath(p) {
        return p.replace(/\/$/, '')
    }

    path = normalizePath(path)
    const route = routes.find(r => {
        const re = new RegExp('^' + normalizePath(r.path) + '$')
        return re.test(path)
    })

    return route?.content ?? '<div>Not Found</div>'
}

function routeResolverString(path) {
    path = path.endsWith('/') ? path.slice(0, -1) : path;

    const route = routes.find(r => r.path === path);
    return route?.content ?? '<div>Not Found</div>'
}

function routeResolverArray(path) {
    const segments = path.split('/').filter(Boolean);
    const route = routes.find(r => segments.join('/') === r.path);
    return route?.content ?? '<div>Not Found</div>'
}

Tests:

RegExp Implementation
routeResolverRegex('/user/1234');
String Implementation
routeResolverString('/user/1234');
Array Implementation
routeResolverArray('/user/1234');