Benchmark: parseInt vs toFixed vs tilde vs bitwise

HTML Preparation code:

<div id="num"></div>

AخA
 
<div id="num"></div>

Script Preparation code:

var el = document.getElementById('num');

 
var el = document.getElementById('num');

Tests:

parseInt

var decimal = 30.0;
for (var i = 0; i < 10000; i++) {
  decimal += (i / 1000);
  el.innerHTML = parseInt(decimal, 10);
}

 
var decimal = 30.0;for (var i = 0; i < 10000; i++) {  decimal += (i / 1000);  el.innerHTML = parseInt(decimal, 10);}

toFixed

var decimal = 30.0;
for (var i = 0; i < 10000; i++) {
  decimal += (i / 1000);
  el.innerHTML = decimal.toFixed();
}

 
var decimal = 30.0;for (var i = 0; i < 10000; i++) {  decimal += (i / 1000);  el.innerHTML = decimal.toFixed();}

Tilde

var decimal = 30.0;
for (var i = 0; i < 10000; i++) {
  decimal += (i / 1000);
  el.innerHTML = ~~decimal;
}

 
var decimal = 30.0;for (var i = 0; i < 10000; i++) {  decimal += (i / 1000);  el.innerHTML = ~~decimal;}

Bitwise

var decimal = 30.0;
for (var i = 0; i < 10000; i++) {
  decimal += (i / 1000);
  el.innerHTML = decimal | 0;
}

 
var decimal = 30.0;for (var i = 0; i < 10000; i++) {  decimal += (i / 1000);  el.innerHTML = decimal | 0;}

Math.round

var decimal = 30.0;
for (var i = 0; i < 10000; i++) {
  decimal += (i / 1000);
  el.innerHTML = Math.round(decimal);
}

 
var decimal = 30.0;for (var i = 0; i < 10000; i++) {  decimal += (i / 1000);  el.innerHTML = Math.round(decimal);}

Math.trunc

var decimal = 30.0;
for (var i = 0; i < 10000; i++) {
  decimal += (i / 1000);
  el.innerHTML = Math.trunc(decimal);
}

 
var decimal = 30.0;for (var i = 0; i < 10000; i++) {  decimal += (i / 1000);  el.innerHTML = Math.trunc(decimal);}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
parseInt
toFixed
Tilde
Bitwise
Math.round
Math.trunc

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 8

View result in a separate tab

Test name	Executions per second
parseInt	34.9 Ops/sec
toFixed	31.0 Ops/sec
Tilde	31.1 Ops/sec
Bitwise	35.4 Ops/sec
Math.round	35.5 Ops/sec
Math.trunc	35.3 Ops/sec

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

Let's break down the benchmark and explain what is being tested.

What is being tested?

The benchmark is comparing four different methods to format or manipulate decimal numbers:

parseInt
toFixed
"Tilde" (which is actually the bitwise NOT operator ~, but it can be used as a shorthand for rounding)
Bitwise operation (decimal | 0)
Math.round and Math.trunc

The test case is creating a decimal number and repeatedly adding a small increment to it, updating an HTML element with the current value using each of these methods.

Options compared

parseInt: converts the decimal number to an integer
toFixed: formats the decimal number as a fixed-point string (e.g., "30.0")
"Tilde" (~~): uses the bitwise NOT operator to round down to the nearest whole number
Bitwise operation (decimal | 0): uses the bitwise AND operator with 0 to truncate the decimal part
Math.round: rounds the decimal number to the nearest integer
Math.trunc: truncates the decimal number to the nearest whole number (similar to "Tilde" but using a built-in function)

Pros and cons of each approach

parseInt: simple, fast, but may lose precision due to rounding errors
toFixed: more precise than parseInt, but can be slower due to string formatting overhead
"Tilde" (~~): fast, but can produce unexpected results if the input is not an integer
Bitwise operation (decimal | 0): very fast, but may be less readable and more prone to errors
Math.round: more precise than parseInt, but still rounds down
Math.trunc: similar to "Tilde" but using a built-in function, which can be faster and more reliable

Other considerations

The use of bitwise operations is an unusual approach for formatting decimal numbers. While it may be fast, it's not the most readable or maintainable solution.
The use of ~~ as a shorthand for rounding down is also uncommon. It's better to use Math.trunc or Math.round instead.

Library

None mentioned in this benchmark. However, note that some browsers (like Chrome) have built-in functions like toFixed and Math.round/Math.trunc, which can simplify the implementation.

Special JS feature/syntax

None explicitly mentioned in this benchmark.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**What is being tested?**

The benchmark is comparing four different methods to format or manipulate decimal numbers:

1. `parseInt`
2. `toFixed`
3. "Tilde" (which is actually the bitwise NOT operator ~, but it can be used as a shorthand for rounding)
4. Bitwise operation (`decimal | 0`)
5. `Math.round` and `Math.trunc`

The test case is creating a decimal number and repeatedly adding a small increment to it, updating an HTML element with the current value using each of these methods.

**Options compared**

* `parseInt`: converts the decimal number to an integer
* `toFixed`: formats the decimal number as a fixed-point string (e.g., "30.0")
* "Tilde" (`~~`): uses the bitwise NOT operator to round down to the nearest whole number
* Bitwise operation (`decimal | 0`): uses the bitwise AND operator with 0 to truncate the decimal part
* `Math.round`: rounds the decimal number to the nearest integer
* `Math.trunc`: truncates the decimal number to the nearest whole number (similar to "Tilde" but using a built-in function)

**Pros and cons of each approach**

* `parseInt`: simple, fast, but may lose precision due to rounding errors
* `toFixed`: more precise than `parseInt`, but can be slower due to string formatting overhead
* "Tilde" (`~~`): fast, but can produce unexpected results if the input is not an integer
* Bitwise operation (`decimal | 0`): very fast, but may be less readable and more prone to errors
* `Math.round`: more precise than `parseInt`, but still rounds down
* `Math.trunc`: similar to "Tilde" but using a built-in function, which can be faster and more reliable

**Other considerations**

* The use of bitwise operations is an unusual approach for formatting decimal numbers. While it may be fast, it's not the most readable or maintainable solution.
* The use of `~~` as a shorthand for rounding down is also uncommon. It's better to use `Math.trunc` or `Math.round` instead.

**Library**

None mentioned in this benchmark. However, note that some browsers (like Chrome) have built-in functions like `toFixed` and `Math.round`/`Math.trunc`, which can simplify the implementation.

**Special JS feature/syntax**