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

Test name	Executions per second
RegExp Implementation	1905103.2 Ops/sec
String Implementation	16665818.0 Ops/sec
Array Implementation	1763811.5 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');

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

RegExp Implementation

String Implementation

Array Implementation