Benchmark: getCookie: for vs for...of vs indexOf vs find vs reduce v2

getCookie: for vs for...of vs indexOf vs find vs reduce v2 (version: 1)

Performance comparison of 5 functions to get Cookie value from a document.cookie string.

Comparing performance of: for...of - 1000 short cookies vs IndexOf() - 1000 short cookies vs find() - 1000 short cookies vs reduce() - 1000 short cookies vs for...of - 10 long cookies vs IndexOf() - 10 long cookies vs find() - 10 long cookies vs reduce() - 10 long cookies vs for - 1000 short cookies vs for - 10 long cookies vs getCookieRegex - 1000 short cookies vs getCookieRegex - 10 long cookies

Created: one month ago by: Guest

Jump to the latest result

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

let values1000 = [...Array(1000).keys()];
var documentCookie1000 = ''; // mock document.cookie string - 1000 SHORT VALUES
values1000.forEach(v => {
	documentCookie1000 += `${v}name=${v}some-unique-cookie-value-with=equal-sign; `;
})
documentCookie1000 += 'findMe=found-test-value-with=equal-sign; lastCookie=test-value';
console.log(documentCookie1000);

let values10 = [...Array(10).keys()];
var documentCookie10 = ''; // mock document.cookie string - 10 LONG VALUES
values10.forEach(v => {
	documentCookie10 += `${v}name=${v}511=RmKsfdVddsfsdmrAQi8UK_S8CF7Bsdfds=O9lh5lAa74bsuEu31d3hB-_3wcypj6fdssqWzo-DbjOKnHHL6bkiEt6dsfZHrEXiFuuKTq2kdlOtE9up4EFdsfsdk90XLwjT1Up7maWRYT8EHm3eluUoQ0KHLEjpSfjFjiY75b8XRHWuNMcw9j4vLaQU3CcfIY-GMRz9DhYF1dsfsdec8PeJj9Mg9do_7ziOcdsfdsDrmLXj3P69RWkIVMpXh_iYQ2bpPWW7zAq0Vqkdfdq7fqYZYsARIz57JXJwGnezDrLjbnFEJNnCfFW52jqHYJlfKpmdfdhPp9DZzfdDCoXDuQ1KRDRgAxmfukkZcMIbdOWcooD41lgezwxpaXXuvYrJTpJhJd5iifSd1STFyxMeQq6y9mIBuc-Q1FXVKqVzu1KmMvRozzqz3bt95zUKmEdGGUkdcPdE8n11cDMdJutpNhEm2gMVcKmKAcEtt-5qOCbOjmqdoFd-qdSF7b19v8Zdsfds8oOf5LPQjB8kU1WlwrEJ59KAkMEyEBjGfVZMkbvxdfdsaLxLgOHqEWrHZoZjrnMMEOgoarCviw7qCD4OqabPhdsfdsbh9UVwJelx_cVddfdsf9GetyLbPy1PFdfOgT; `;
})
documentCookie10 += 'findMe=found-test-value-with=equal-sign; lastCookie=test-value';
console.log(documentCookie10);

function getCookieFor(name, cookies) {
    const nameEQ = name + "=";
    const ca = cookies.split('; ');
    for(let i=0;i < ca.length;i++) {
        const c = ca[i];
        if (c.indexOf(nameEQ) === 0) {
          const value = c.substring(nameEQ.length);
          return decodeURIComponent(value); // returns first found cookie
        }
    }
    return null;
}

function getCookieForOf(name, cookies) {
  const nameEQ = name + '=';
  for (const cookie of cookies.split('; ')) {
    if (cookie.indexOf(nameEQ) === 0) {
      const value = cookie.substring(nameEQ.length);
      return decodeURIComponent(value); // returns first found cookie
    }
  }
  return null;
}

function getCookieIndexOf(name, cookies) {
  const nameEQ = name + '=';
  const cookieStart = cookies.indexOf(nameEQ);
  if (cookieStart !== -1) {
    const cookieValueStart = cookieStart + nameEQ.length;
    const cookieEnd = cookies.indexOf(';', cookieValueStart);
    const value = cookies.substring(
      cookieValueStart,
      cookieEnd !== -1 ? cookieEnd : undefined
    );
    return decodeURIComponent(value); // returns first found cookie
  }
  return null;
}

function getCookieFind(name, cookies) {
  const nameEQ = name + '=';
  const foundCookie = cookies
    .split('; ')
    .find(c => c.indexOf(nameEQ) === 0); // returns first found cookie
  if (foundCookie) {
    return decodeURIComponent(foundCookie.substring(nameEQ.length));
  }
  return null;
}

function getCookieReduce(name, cookies) {
  return cookies.split('; ').reduce((r, v) => {
    const [n, ...val] = v.split('='); // cookie value can contain "="
    if(r) return r; // returns first found cookie
    return n === name ? decodeURIComponent(val.join('=')) : r; // returns last found cookie (overwrites)
  }, '');
}

function getCookieRegex(name, cookies) {
        const matched = `; ${cookies}`.match(`;\\s*${name}=([^;]+)`);
        if (matched) return matched[1];
        return null;
}

Tests:

for...of - 1000 short cookies
return getCookieForOf('findMe', documentCookie1000);
IndexOf() - 1000 short cookies
return getCookieIndexOf('findMe', documentCookie1000);
find() - 1000 short cookies
return getCookieFind('findMe', documentCookie1000);
reduce() - 1000 short cookies
return getCookieReduce('findMe', documentCookie1000);
for...of - 10 long cookies
return getCookieForOf('findMe', documentCookie10);
IndexOf() - 10 long cookies
return getCookieIndexOf('findMe', documentCookie10);
find() - 10 long cookies
return getCookieFind('findMe', documentCookie10);
reduce() - 10 long cookies
return getCookieReduce('findMe', documentCookie10);
for - 1000 short cookies
return getCookieFor('findMe', documentCookie1000);
for - 10 long cookies
return getCookieFor('findMe', documentCookie10);
getCookieRegex - 1000 short cookies
return getCookieRegex('findMe', documentCookie1000);
getCookieRegex - 10 long cookies
return getCookieRegex('findMe', documentCookie10);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for...of - 1000 short cookies
IndexOf() - 1000 short cookies
find() - 1000 short cookies
reduce() - 1000 short cookies
for...of - 10 long cookies
IndexOf() - 10 long cookies
find() - 10 long cookies
reduce() - 10 long cookies
for - 1000 short cookies
for - 10 long cookies
getCookieRegex - 1000 short cookies
getCookieRegex - 10 long cookies

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for...of - 1000 short cookies	31134.7 Ops/sec
IndexOf() - 1000 short cookies	652432.5 Ops/sec
find() - 1000 short cookies	30552.9 Ops/sec
reduce() - 1000 short cookies	7565.9 Ops/sec
for...of - 10 long cookies	323858.7 Ops/sec
IndexOf() - 10 long cookies	229865.0 Ops/sec
find() - 10 long cookies	322693.6 Ops/sec
reduce() - 10 long cookies	414275.5 Ops/sec
for - 1000 short cookies	31143.0 Ops/sec
for - 10 long cookies	324835.5 Ops/sec
getCookieRegex - 1000 short cookies	80701.0 Ops/sec
getCookieRegex - 10 long cookies	549934.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares the performance of various functions used to retrieve cookie values from a simulated `document.cookie` string. The benchmark explores five different approaches for cookie retrieval and tests their efficiency across two scenarios: one with a mock string representing 1000 short cookies and another with 10 long cookies.

### Approaches Compared

1. **For Loop (`getCookieFor`)**
   - **Implementation**: This function uses a classic `for` loop to iterate through the cookies. It splits the `document.cookie` string into an array and checks each element for the desired cookie by checking the string's prefix.
   - **Pros**: Familiarity, extensive compatibility with JavaScript environments, and potentially lower overhead due to the simplicity of the logic.
   - **Cons**: Slightly more verbose and may be less efficient compared to newer native methods in large datasets.
  
2. **For...of Loop (`getCookieForOf`)**
   - **Implementation**: Utilizes the `for...of` construct, which iterates directly over iterable objects, such as arrays created from the `document.cookie` string.
   - **Pros**: More readable syntax compared to traditional `for` loops. Optimized for usability and clarity.
   - **Cons**: Minor performance overhead in specific circumstances compared to a traditional `for` loop, depending on the JavaScript engine.

3. **IndexOf Method (`getCookieIndexOf`)**
   - **Implementation**: This function directly uses the `indexOf` method to find the starting position of the cookie name in the string and extracts the value from there.
   - **Pros**: High performance for known cases, as it avoids needless iteration over all cookies once the desired one is found.
   - **Cons**: Can be less robust if multiple cookies have similar names since it relies on the first index match.

4. **Find Method (`getCookieFind`)**
   - **Implementation**: This leverages the `find` method of arrays, looking for the first cookie that matches the given name. 
   - **Pros**: Concise and expressive, focusing on readability.
   - **Cons**: Typically slower than `indexOf()` or traditional loops due to the overhead of a new function invocation and the need for a callback function.

5. **Reduce Method (`getCookieReduce`)**
   - **Implementation**: Uses the `reduce` function to traverse the cookie array and accumulate the result based on conditions.
   - **Pros**: Functions well for extracting values and can be elegantly structured for more complex data handling.
   - **Cons**: Generally may be less performant due to its functional programming approach, which can lead to increased overhead.

6. **Regex Method (`getCookieRegex`)**
   - **Implementation**: Utilizes a regular expression to match the cookie directly from the string.
   - **Pros**: Powerful for complex patterns; quick to write and can handle edge cases effectively in specific situations.
   - **Cons**: Regular expressions can introduce overhead and complexity; they might be less readable for others unfamiliar with regex.

### Other Considerations
- **Execution Context**: Results were captured on the same environment (Chrome 131 on Mac OS X 10.15.7). Performance may vary widely across different browsers and environments.
- **Data Size**: Performance metrics were collected for both small and large cookie strings. This will influence which method to prefer based on expected data sizes in real applications.
- **Initialization Overhead**: When benchmarking, initialization timing and garbage collection should be monitored closely since these can distort performance metrics.
- **Use Cases**: Depending on the frequency and speed requirements for fetching cookie values, developers may choose different methods. For high-frequency access, a more efficient method could significantly affect overall performance.

### Alternatives
- **Local Storage**: For storing persistent data that does not need to be sent with every HTTP request (like cookies), consider using `localStorage` or `sessionStorage`, which have simpler APIs.
- **Database Solutions**: For larger datasets beyond what cookies can handle, a lightweight database (like IndexedDB) could be more appropriate.
- **Third-Party Libraries**: Utilizing libraries such as `js-cookie` or similar can provide cross-browser compatibility and ease of use for cookie management while abstracting the lower-level details.

Each of these methods offers different trade-offs in terms of readability, maintainability, and performance based on context, making it crucial for engineers to understand the implications of each approach to optimize their applications effectively.

Related benchmarks:

getCookie: for vs for...of vs indexOf vs find vs reduce v2 (version: 1)

Performance comparison of 5 functions to get Cookie value from a document.cookie string.

Created: one month ago by: Guest

Jump to the latest result

for...of - 1000 short cookies

IndexOf() - 1000 short cookies

find() - 1000 short cookies

reduce() - 1000 short cookies

for...of - 10 long cookies

IndexOf() - 10 long cookies

find() - 10 long cookies

reduce() - 10 long cookies

for - 1000 short cookies

for - 10 long cookies

getCookieRegex - 1000 short cookies

getCookieRegex - 10 long cookies

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):