Benchmark: Math.max/min vs if vs ternary vs bitwise & ~~ & lodash - 5 numbers

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.7.11/lodash.min.js'></script>

Script Preparation code:

var x = Math.random() * 1000;
var clientX = Math.random() * 1000;
var px = Math.random() * 1000;
var maxWidth = Math.random() * 1000;
function MAX_INT(a, b) {
  return a - ((a - b) & ((a - b) >> 31));
}

function MIN_INT(a, b) {
  return a - ((a - b) & ((b - a) >> 31));
}
function MAX(a, b) {
  const intA = ~~a;
  const intB = ~~b;
  return intA - ((intA - intB) & ((intA - intB) >> 31));
}

function MIN(a, b) {
  const intA = ~~a;
  const intB = ~~b;
  return intA - ((intA - intB) & ((intB - intA) >> 31));
}

Tests:

Math.max/min
Math.min(Math.max(x + clientX - px, 0), maxWidth) - x
if
if(x + clientX - px < 0) return 0; if(x + clientX - px > 750) return maxWidth; return x + clientX - px;
ternary
return x + clientX - px < 0 ? 0 : (x + clientX - px > maxWidth ? maxWidth : x + clientX - px) - x;
bitwise
MIN_INT(MAX_INT(x + clientX - px, 0), maxWidth)
& ~~
MIN(MAX(x + clientX - px, 0), maxWidth)
lodash clamp
_.clamp(x + clientX - px, 0, maxWidth)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Math.max/min
if
ternary
bitwise
& ~~
lodash clamp

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/100.0.4896.60 Safari/537.36

Browser/OS: Chrome 100 on Linux

View result in a separate tab

Test name	Executions per second
Math.max/min	2566094.8 Ops/sec
if	7606500.5 Ops/sec
ternary	7805290.5 Ops/sec
bitwise	3752870.0 Ops/sec
& ~~	3732540.8 Ops/sec
lodash clamp	3431596.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what is tested, compared, and their pros and cons.

**Benchmark Definition**

The test case defines six different approaches to compare:

1. `Math.min(Math.max(x + clientX - px, 0), maxWidth)` - This approach uses built-in JavaScript functions to achieve a similar result.
2. `if (x + clientX - px < 0) return 0; if (x + clientX - px > 750) return maxWidth; return x + clientX - px;` - This approach uses an `if-else` statement with conditional returns.
3. `return x + clientX - px < 0 ? 0 : (x + clientX - px > maxWidth ? maxWidth : x + clientX - px) - x;` - This approach uses a ternary operator with multiple conditions.
4. `MIN_INT(MAX_INT(x + clientX - px, 0), maxWidth)` - This approach uses bitwise operations to achieve a similar result, using two custom functions: `MAX_INT` and `MIN_INT`.
5. `MIN(MAX(x + clientX - px, 0), maxWidth)` - This approach uses bitwise operations with a single function, `MIN`, and the `~~` operator.
6. `_.clamp(x + clientX - px, 0, maxWidth)` - This approach uses the Lodash library's `clamp` function to achieve a similar result.

**Comparison**

Each test case compares the execution time of one approach against another, allowing users to see which method is faster in certain scenarios.

**Pros and Cons**

1. **Built-in JavaScript functions (Math.min(Math.max(x + clientX - px, 0), maxWidth))**:
	* Pros: Easy to understand and implement, no additional dependencies required.
	* Cons: May be slower due to function call overhead.
2. **If-else statement with conditional returns**:
	* Pros: Simple and easy to read, no additional dependencies required.
	* Cons: Can be prone to errors if not implemented carefully.
3. **Ternary operator with multiple conditions**:
	* Pros: Compact and readable, reduces code duplication.
	* Cons: May be harder to understand for those unfamiliar with ternary operators.
4. **Bitwise operations (MIN_INT(MAX_INT(x + clientX - px, 0), maxWidth) and MIN(MAX(x + clientX - px, 0), maxWidth))**:
	* Pros: Can be faster than built-in functions or if-else statements due to reduced overhead.
	* Cons: May require more expertise in bitwise operations to understand and implement correctly.
5. **Lodash library (_.clamp(x + clientX - px, 0, maxWidth))**:
	* Pros: Provides a convenient and readable way to achieve the desired result without worrying about implementation details.
	* Cons: Requires an additional dependency (the Lodash library) and may have performance implications.

**Other Considerations**

* The `~~` operator is used in some approaches, which is a bitwise NOT operator that converts numbers to integers. This can be an interesting edge case to explore, especially for those familiar with bitwise operations.
* The use of custom functions (`MAX_INT` and `MIN_INT`) in the bitwise approach adds complexity but may provide performance benefits.

Overall, this benchmark allows users to compare different approaches to achieving a similar result, helping them understand which methods are faster and more efficient in various scenarios.

Related benchmarks:

Math.max/min vs if vs ternary vs bitwise & ~~ & lodash - 5 numbers (version: 0)

Comparing performance of: Math.max/min vs if vs ternary vs bitwise vs & ~~ vs lodash clamp

Created: 4 years ago by: Guest

Jump to the latest result

Math.max/min

if

ternary

bitwise

& ~~

lodash clamp

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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