Benchmark: Partial base, search, fragment of URL

Script Preparation code:

var url1 = "https://localhost:3000/test?key1=value1&key2=value2#test";
var url2 = "https://localhost:3000/test#test?key1=value1&key2=value2";

const urlPattern = /^(https?:\/\/[^\/?#]+[^?#]*)?(?:\?([^#]*))?(?:#([^?]*))?(?:\?([^#]*))?/;

function extractParts1(inputUrl) {
    const match = inputUrl.match(urlPattern);
    if (!match) return null;

    let url = match[1] || null;
    let searchParams = match[2] || null;
    let fragment = match[3] || null;
    // If there are query parameters after the fragment
    if (match[4]) {
        searchParams = searchParams ? searchParams + '&' + match[4] : match[4];
    }

    return {
        url,
        searchParams,
        fragment
    };
}


function extractParts2(inputUrl) {
    // Parse basic URL and fragment
    const [base, fragmentQuery] = inputUrl.split('#');
    
    // Parse URL and search parameters from base
    let [url, searchParams] = base.split('?');

    // If there's fragment data, check for additional query parameters
    let fragment = null;
    let extraSearchParams = null;
    if (fragmentQuery) {
        if (fragmentQuery.includes('?')) {
            [fragment, extraSearchParams] = fragmentQuery.split('?');
            searchParams = searchParams ? `${searchParams}&${extraSearchParams}` : extraSearchParams;
        } else {
            fragment = fragmentQuery;
        }
    }

    return {
        url,
        searchParams: searchParams || null,
        fragment: fragment || null
    };
}


function extractParts3(inputUrl) {
    const queryIndex = inputUrl.indexOf('?');
    const hashIndex = inputUrl.indexOf('#');

    const hasQueryBeforeHash = queryIndex !== -1 && (hashIndex === -1 || queryIndex < hashIndex);

    const url = hasQueryBeforeHash ? inputUrl.substring(0, queryIndex) : (hashIndex !== -1 ? inputUrl.substring(0, hashIndex) : inputUrl);

    let searchParams = null, fragment = null;

    if (hashIndex !== -1) {
        const fragmentWithQuery = inputUrl.substring(hashIndex + 1);
        const fragmentQueryIndex = fragmentWithQuery.indexOf('?');

        if (fragmentQueryIndex !== -1) {
            fragment = fragmentWithQuery.substring(0, fragmentQueryIndex);
            searchParams = fragmentWithQuery.substring(fragmentQueryIndex + 1);
            if (hasQueryBeforeHash) {
                searchParams = inputUrl.substring(queryIndex + 1, hashIndex) + '&' + searchParams;
            }
        } else {
            fragment = fragmentWithQuery;
        }
    }

    if (hasQueryBeforeHash && !searchParams) {
        searchParams = hashIndex !== -1 ? inputUrl.substring(queryIndex + 1, hashIndex) : inputUrl.substring(queryIndex + 1);
    }

    return {
        url,
        searchParams: searchParams || null,
        fragment: fragment || null
    };
}

function extractParts4(inputUrl) {
    return new URL(inputUrl);
}

Tests:

patern 1
extractParts1(url1); extractParts1(url2);
patern 2
extractParts2(url1); extractParts2(url2);
patern 3
extractParts3(url1); extractParts3(url2);
patern 4
extractParts4(url1); extractParts4(url2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
patern 1
patern 2
patern 3
patern 4

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Linux

View result in a separate tab

Test name	Executions per second
patern 1	3962282.8 Ops/sec
patern 2	4557349.5 Ops/sec
patern 3	5784386.0 Ops/sec
patern 4	901886.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript code is crucial for identifying bottlenecks and optimizing applications.

The provided benchmark test case is designed to measure the performance of four different approaches for parsing URLs in JavaScript:

1. **extractParts1**: This function uses regular expressions to extract the URL, search parameters, and fragment from a given input URL.
2. **extractParts2**: This function splits the URL into two parts: the base URL and the fragment query string. It then parses the base URL for search parameters and combines them with the fragment query if present.
3. **extractParts3**: This function uses the `indexOf` method to identify the positions of the query string and hash symbol in the input URL. It then extracts the corresponding parts and combines them.
4. **extractParts4**: This function uses the built-in `URL` API to parse the input URL.

**Options Comparison:**

*   The four approaches differ significantly in their complexity, regular expression usage, and parsing strategy.
*   `extractParts1` uses a single regular expression to match the entire URL, which might lead to slower performance for complex URLs or when dealing with edge cases.
*   `extractParts2` is simpler but may require more manual string manipulation, potentially leading to slower performance due to overhead from concatenating strings.
*   `extractParts3` relies on simple indexing and substring extraction, making it a lightweight option.
*   `extractParts4` uses the built-in `URL` API, which might offer better performance due to its optimized parsing logic and reduced overhead.

**Pros and Cons:**

*   **extractParts1**: Pros - simple implementation; Cons - potential complexity for edge cases or complex URLs. Slow performance when dealing with regular expression matching.
*   **extractParts2**: Pros - straightforward implementation, minimal string concatenation; Cons - may introduce additional overhead from string manipulation.
*   **extractParts3**: Pros - lightweight, easy to implement; Cons - potentially limited by simple indexing and substring extraction.
*   **extractParts4**: Pros - built-in API with optimized parsing logic; Cons - may require additional dependencies (if not already included) and compatibility issues.

**Browser Performance Comparison:**

According to the latest benchmark results, `extractParts3` appears to be the fastest approach, followed closely by `extractParts4`. This suggests that the lightweight implementation of `extractParts3` might offer better performance in this specific case. However, it is essential to note that these results are specific to Chrome 122 and Linux environments.

**Optimization Recommendations:**

*   Profile your specific use cases to identify potential bottlenecks and optimize accordingly.
*   Use regular expressions judiciously, considering edge cases and performance implications.
*   Optimize string concatenation in `extractParts2` by using more efficient string manipulation techniques or minimizing concatenation altogether.
*   Consider leveraging the built-in `URL` API for improved performance, but ensure compatibility with different browsers and environments.

By carefully evaluating each approach and their trade-offs, you can choose the most suitable optimization strategy for your specific use case.

Related benchmarks:

Partial base, search, fragment of URL (version: 0)

Comparing performance of: patern 1 vs patern 2 vs patern 3 vs patern 4

Created: 2 years ago by: Guest

Jump to the latest result

patern 1

patern 2

patern 3

patern 4

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):