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

getCookie: for vs for...of vs indexOf vs find vs reduce (version: 5) Benchmark.js

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`

Created: 4 years ago by: Registered User

Go 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)
  }, '');
}

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);

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

IndexOf() - 1000 short cookies

552K/s

find() - 10 long cookies

295K/s

for...of - 10 long cookies

292K/s

for - 10 long cookies

283K/s

reduce() - 10 long cookies

277K/s

IndexOf() - 10 long cookies

228K/s

for...of - 1000 short cookies

25K/s

for - 1000 short cookies

22K/s

find() - 1000 short cookies

21K/s

reduce() - 1000 short cookies

5K/s

Fastest: IndexOf() - 1000 short cookies (114.2x faster)

View exact numbers

✓ IndexOf() - 1000 short cookies: 552,214 ops/sec
• find() - 10 long cookies: 295,256 ops/sec
• for...of - 10 long cookies: 292,249 ops/sec
• for - 10 long cookies: 282,831 ops/sec
• reduce() - 10 long cookies: 277,458 ops/sec
• IndexOf() - 10 long cookies: 227,807 ops/sec
• for...of - 1000 short cookies: 25,141 ops/sec
• for - 1000 short cookies: 22,001 ops/sec
• find() - 1000 short cookies: 21,378 ops/sec
• reduce() - 1000 short cookies: 4,834 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 143 on Windows

View result in a separate tab

IndexOf() - 1000 short cookies

325K/s

find() - 10 long cookies

224K/s

for...of - 10 long cookies

223K/s

for - 10 long cookies

223K/s

IndexOf() - 10 long cookies

208K/s

reduce() - 10 long cookies

194K/s

for - 1000 short cookies

15K/s

for...of - 1000 short cookies

15K/s

find() - 1000 short cookies

14K/s

reduce() - 1000 short cookies

3K/s

View exact numbers

Test name	Executions per second
✓ IndexOf() - 1000 short cookies	325,407 Ops/sec
find() - 10 long cookies	224,328 Ops/sec
for...of - 10 long cookies	223,355 Ops/sec
for - 10 long cookies	222,518 Ops/sec
IndexOf() - 10 long cookies	207,564 Ops/sec
reduce() - 10 long cookies	194,280 Ops/sec
for - 1000 short cookies	15,053 Ops/sec
for...of - 1000 short cookies	14,954 Ops/sec
find() - 1000 short cookies	14,468 Ops/sec
reduce() - 1000 short cookies	3,206 Ops/sec

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

LLMs can make mistakes. Check important info.

A JSON data dump!

Let's dive into the data. It appears to be a collection of test results for various JavaScript operations on arrays of cookies.

Here are some key observations:

* There are 9 different tests, each with a unique `TestName`.
* Each test is represented by an object containing metadata about the test run, such as:
	+ `Browser`: The browser type and version.
	+ `DevicePlatform`: The device platform (Desktop).
	+ `OperatingSystem`: The operating system used.
	+ `ExecutionsPerSecond`: The number of executions per second for this test.
* There are two types of cookies: long (`- 10 long cookies`) and short (`- 1000 short cookies`).

Some interesting questions arise from this data:

1. Which browser performed best on each test?
2. Are there any significant differences in performance between long and short cookie arrays?
3. Can we infer anything about the nature of the tests or the underlying algorithms being tested based on these results?

Feel free to ask me specific questions about the data, and I'll do my best to provide insights!