Benchmark: Fetch cookie value

Script Preparation code:

function getCookieIX_B(name, str,idx) {
  name = "; " + name + "=";
  var ck = str || document.cookie;
  ck = "; " + ck;
  if ((idx = ck.lastIndexOf(name)) == -1) {
    return undefined;
  }
  var nameLength = name.length;
  var p1 = ck.substring(idx + nameLength);
  var idx2 = p1.indexOf(";");
  idx2 = idx2==-1 ? undefined : idx2;
  var p2 = p1.substring(0, idx2);
  return decodeURIComponent(p2);
}
function getCookieIX(name,str){
  name = name+'=';
  var ck = str || document.cookie;
  var idx = ck.lastIndexOf(name);
  if(idx==-1){ return undefined}
  var nameLength = name.length;
  var p1 = ck.substring(idx+nameLength);
  var idx2 = p1.indexOf(';');
  if(idx2>-1){
    p1 = p1.substring(0,idx2);
  }
  return decodeURIComponent(p1);
}

function getCookieIX2(name, str,idx) {
  name = "; " + name + "=";
  var ck = str || document.cookie;
  ck = "; " + ck;
  if ((idx = ck.lastIndexOf(name)) == -1) {
    return undefined;
  }
  var nameLength = name.length;
  var p1 = ck.substring(idx + nameLength);
  p1 = p1.split(';')[0];
  return decodeURIComponent(p1);
}

function getCookie(name,str) {
  var nameEQ = name + "=";
  var ca = (str||document.cookie).split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) {
      var d = c.substring(nameEQ.length, c.length);
      d = decodeURIComponent(d);
      return d;
    }
  }
  return undefined;
}

function getCookieM(name,str) {
  name = name + "";
  var re = new RegExp("(^| )" + name + "=([^;]+)", "gmi");
  var m = (str||document.cookie).match(re);
  if (!!m) {
    m = m.pop();
    m = m.substring(m.indexOf("=") + 1);
    m = !!m ? decodeURIComponent(m) : m;
    return m;
  }
}

function getCookieW(name, str) {
  var str = str || document.cookie;
  var re = new RegExp("(?:^|; )("+name+"+?)(?:=([^;]*))?(?:;|$)", "gi");
  var value;
  var match;
  while ((match = re.exec(str))) {
    re.lastIndex = match.index + match.length - 1;
    var k = match[1];
    var v = decodeURIComponent(match[2]);
    !!v && (value = v);
  }

  return value;
}

function getCookieR(name,str) {
  var nameEQ = name + "=";
  var ca = (str||document.cookie).split(";");
  var cal = ca.length;
  for (var i = cal; i >= 0; i--) {
    var c = ca[i];
    if (!!c) {
      c = c.trim();
      if (c.indexOf(nameEQ) == 0) {
        var d = c.substring(nameEQ.length, c.length);
        d = decodeURIComponent(d);
        return d;
      }
    }
  }
  return undefined;
}
function generateTestData(){
  let foo = [];
  for (let i = 0; i < 20; i++) {
    var x = i+1;
    foo.push('foo_'+x+'='+'bar_'+x+'_'+performance.now());
    foo.push('foo_'+x+'='+'bar_second_'+x+'_'+performance.now());
  }
  foo = foo.join('; ');
  return foo;
}
var hay = generateTestData();

Tests:

Regex loop
getCookieW('foo_10',hay)
Regex
getCookieM('foo_10',hay)
Original
getCookie('foo_10',hay)
Original reversed
getCookieR('foo_10',hay)
LastIndexOf
getCookieIX('foo_10',hay)
LastIndexOf B
getCookieIX_B('foo_10',hay)
LastIndexOf 2
getCookieIX2('foo_10',hay)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Regex loop
Regex
Original
Original reversed
LastIndexOf
LastIndexOf B
LastIndexOf 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
Regex loop	1238287.9 Ops/sec
Regex	1406916.4 Ops/sec
Original	871842.9 Ops/sec
Original reversed	802742.4 Ops/sec
LastIndexOf	3860891.2 Ops/sec
LastIndexOf B	1128784.1 Ops/sec
LastIndexOf 2	725791.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided evaluates various JavaScript functions designed to retrieve cookie values from a cookie string. Different implementations of cookie retrieval are compared in terms of performance, specifically their ability to handle the same task using different techniques. Below, we will explore the functionalities tested, the alternatives compared, their pros and cons, and other considerations.

### Overview of Tested Functions
1. **getCookieW**: Uses a regex pattern to capture the cookie's value.
2. **getCookieM**: This also employs regular expressions but captures the cookie with a different regex approach.
3. **getCookie**: A straightforward iterative method that splits the cookie string into an array and checks each cookie by looking for an equal sign.
4. **getCookieR**: Similar to `getCookie`, but iterates through the cookie string in reverse order.
5. **getCookieIX**: Uses `lastIndexOf` to find the cookie and then retrieves its value.
6. **getCookieIX_B**: A variant that uses the same `lastIndexOf` technique but with a slightly different implementation detail in handling the cookie string.
7. **getCookieIX2**: Another version that utilizes `lastIndexOf` but with a different extraction method using `split`.

### Performance Comparison
Performance is measured in terms of executions per second, showing how many times each function can retrieve a cookie value in a given timeframe. Below are details on the options compared:

1. **Regex-Based Functions (`getCookieW`, `getCookieM`)**:
   - **Pros**: 
     - Can construct a concise solution for complex patterns.
     - Might handle edge cases more elegantly (e.g., whitespace).
   - **Cons**: 
     - Generally slower due to regex overhead.
     - Can become complex and difficult to maintain if debugging is needed.

2. **Iterative Functions (`getCookie`, `getCookieR`)**:
   - **Pros**:
     - Straightforward and easy to read.
     - Efficient for small numbers of cookies.
   - **Cons**:
     - Performance can degrade with a larger number of cookies due to the need for splitting the string into an array.
     
3. **Last Index Functions (`getCookieIX`, `getCookieIX_B`, `getCookieIX2`)**:
   - **Pros**:
     - Potentially more efficient than iterative methods, especially for larger strings since they avoid splitting into an array.
     - Directly manipulates the string which can lead to faster execution in the right circumstances.
   - **Cons**:
     - Slightly more complicated implementation, as the logic needs to account for finding indices.

### Performance Results
From the benchmark results, `getCookieIX` performs the best, followed by the regex function `getCookieM`, and then various other methods. The performance gap between `getCookieIX` and the others suggests that leveraging string manipulation with `lastIndexOf` to locate characters is an effective approach for this task.

### Other Considerations
- **Browser Compatibility**: Different browsers may optimize functionality differently, which could lead to variability in performance across different environments. Testing in multiple browsers is essential for comprehensive results.
- **Cookie Complexity**: The functions assume a specific format of cookies; the real world may include edge cases not covered in these tests. Handling those could be critical in a production environment.
- **Maintenance and Readability**: While performance is important, maintainability and clarity of code should not be ignored. Depending on the context, a more straightforward function might be preferable, especially in collaborative environments.

### Alternatives
- **Using a Library**: 
  - **js-cookie**: This is a popular library that simplifies cookie operations, offering clear API methods for handling cookies without worrying about underlying complexity.
    - **Pros**: Easy to use, well-tested, and handles edge cases.
    - **Cons**: Adds an additional dependency, which might be unnecessary for simple use cases, and could potentially lead to performance overhead compared to custom solutions.
  
- **Custom Solutions**: Develop a function based on specific requirements, balancing between performance and readability. This is often the best solution when specifics of cookie handling can be anticipated.

In conclusion, the benchmark effectively illustrates the performance differences between various cookie retrieval methods in JavaScript, highlighting key trade-offs between speed, clarity, and reliability. Software engineers can use this insight to select the most suitable cookie handling paradigm based on their particular application needs.

Related benchmarks:

Fetch cookie value (version: 0)

Comparing performance of: Regex loop vs Regex vs Original vs Original reversed vs LastIndexOf vs LastIndexOf B vs LastIndexOf 2

Created: 2 months ago by: Guest

Jump to the latest result

Regex loop

Regex

Original

Original reversed

LastIndexOf

LastIndexOf B

LastIndexOf 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):