Benchmark: DateTimeFormat vs toLocaleString 3

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here */
var options = {
  year: 'numeric', month: 'numeric', day: 'numeric',
  hour: 'numeric', minute: 'numeric', second: 'numeric',
  hour12: false,
  fractionalSecondDigits: 3,
}

Tests:

DateTimeFormat single
var formatter = new Intl.DateTimeFormat('de-DE', options); formatter.format(new Date());
toLocaleString single
new Date().toLocaleString('de-DE', options);
DateTimeFormat 100
var formatter = new Intl.DateTimeFormat('de-DE', options); [...Array(100)].forEach((_, i) => formatter.format(new Date()));
toLocaleString 100
[...Array(100)].forEach((_, i) => new Date().toLocaleString('de-DE', options));
DateTimeFormat 10000
var formatter = new Intl.DateTimeFormat('de-DE', options); [...Array(10000)].forEach((_, i) => formatter.format(new Date()));
toLocaleString 10000
[...Array(10000)].forEach((_, i) => new Date().toLocaleString('de-DE', options));
DateTimeFormat 4
var formatter = new Intl.DateTimeFormat('de-DE', options); [...Array(4)].forEach((_, i) => formatter.format(new Date()));
toLocaleString 4
[...Array(4)].forEach((_, i) => new Date().toLocaleString('de-DE', options));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DateTimeFormat single
toLocaleString single
DateTimeFormat 100
toLocaleString 100
DateTimeFormat 10000
toLocaleString 10000
DateTimeFormat 4
toLocaleString 4

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months 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
DateTimeFormat single	25287.7 Ops/sec
toLocaleString single	26001.1 Ops/sec
DateTimeFormat 100	8142.2 Ops/sec
toLocaleString 100	273.1 Ops/sec
DateTimeFormat 10000	116.4 Ops/sec
toLocaleString 10000	2.6 Ops/sec
DateTimeFormat 4	23595.8 Ops/sec
toLocaleString 4	6589.9 Ops/sec

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

LLMs can make mistakes. Check important info.

### Comparison of `Intl.DateTimeFormat` and `toLocaleString`

In this JavaScript benchmark from MeasureThat.net, two primary methods for formatting dates and times are tested: `Intl.DateTimeFormat` and `Date.prototype.toLocaleString()`. The benchmark evaluates performance by measuring how many times each method can execute under different scenarios concerning the number of formatting operations performed.

#### Options Compared:

1. **DateTimeFormat**:
   - **Implementation**: Uses the `Intl.DateTimeFormat` constructor to create a formatter object with specific locale and options defined in the preparation code. Once created, it calls the `format` method repeatedly to format the date.
   - **Test Cases**:
     - `DateTimeFormat single`: Format a single date.
     - `DateTimeFormat 4`: Format four dates.
     - `DateTimeFormat 100`: Format one hundred dates.
     - `DateTimeFormat 10000`: Format ten thousand dates.
  
2. **toLocaleString**:
   - **Implementation**: Directly calls `toLocaleString()` on a Date object with the specified locale and options.
   - **Test Cases**:
     - `toLocaleString single`: Format a single date.
     - `toLocaleString 4`: Format four dates.
     - `toLocaleString 100`: Format one hundred dates.
     - `toLocaleString 10000`: Format ten thousand dates.

### Pros and Cons:

#### `Intl.DateTimeFormat`
**Pros**:
- **Efficiency in Re-use**: By creating a single formatter instance (`var formatter = new Intl.DateTimeFormat(...)`) before formatting multiple dates, `Intl.DateTimeFormat` is generally more efficient when formatting multiple dates. The formatter instance is optimized for multiple uses.
- **Customizability**: It offers a wide variety of locale-sensitive options that can be easily configured for different formatting requirements.

**Cons**:
- **Initial Overhead**: There may be some initial overhead in creating the formatter instance, but this is often outweighed by the benefits of re-using it for multiple date formatting operations.

#### `toLocaleString`
**Pros**:
- **Simplicity**: Directly calls on Date objects without needing to create a separate formatter instance. This can be simpler to implement in cases where formatting is needed occasionally or only for a single date.
  
**Cons**:
- **Reduced Performance in Batch Operations**: Calling `toLocaleString()` multiple times creates a new internal formatter each time, which can be significantly slower for multiple calls due to the repeated initialization and configuration overhead.

### Benchmark Results

Based on the latest results:
- For the single date formatting tests, `toLocaleString single` outperformed `DateTimeFormat single`, with approximately 26,001 executions per second compared to 25,288 executions per second.
- However, as the number of dates formatted increases, `DateTimeFormat` demonstrated better performance, particularly at larger scales (100, 10000), where `DateTimeFormat` significantly outperformed `toLocaleString`.
- Notably, the performance drops sharply when formatting 10000 dates with `toLocaleString`, showing its inefficiency in batch processing.

### Other Considerations:

1. **Browser Compatibility**: Both methods are widely supported across modern browsers, but if older browser support is needed, developers should verify compatibility, specifically for `Intl.DateTimeFormat`, which has better internationalization and formatting capabilities.
  
2. **Error Handling**: When handling date formatting, it is important to consider locale-specific formats and potential variations underlying different environments (user's operating system locale, etc.).

3. **Alternatives**:
- For advanced date manipulation and formatting beyond what JavaScript provides, libraries such as **Moment.js** (deprecated) or **date-fns** can be used. These libraries offer extensive functionalities for date manipulation but may introduce overhead depending on usage.
- **Luxon** is another modern alternative that excels in handling dates and times with comprehensive formatting capabilities and timezone support.

In conclusion, the benchmark demonstrates the performance characteristics of using `Intl.DateTimeFormat` for formatting multiple dates compared to directly using `toLocaleString`, showing clear efficiency benefits with re-using formatters in bulk operations.

Related benchmarks:

DateTimeFormat vs toLocaleString 3 (version: 1)

Comparing performance of: DateTimeFormat single vs toLocaleString single vs DateTimeFormat 100 vs toLocaleString 100 vs DateTimeFormat 10000 vs toLocaleString 10000 vs DateTimeFormat 4 vs toLocaleString 4

Created: 3 months ago by: Guest

Jump to the latest result

DateTimeFormat single

toLocaleString single

DateTimeFormat 100

toLocaleString 100

DateTimeFormat 10000

toLocaleString 10000

DateTimeFormat 4

toLocaleString 4

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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