Benchmark: opening hours - MeasureThat.net

HTML Preparation code:

<div id="root"></div>

<script src="https://openingh.openstreetmap.de/opening_hours.js/opening_hours+deps.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

Script Preparation code:

const weekDays = [
  "sundayShort",
  "mondayShort",
  "tuesdayShort",
  "wednesdayShort",
  "thursdayShort",
  "fridayShort",
  "saturdayShort",
];

const dateToDayName = (date) => weekDays[date.getDay()];

function currentWeekRange () {
  const dt = new Date(); // current date of week
  dt.setHours(0); //reset hours
  const currentWeekDay = dt.getDay();
  const daysToMonday = currentWeekDay === 0 ? 6 : currentWeekDay - 1;
  const weekStart = new Date(new Date(dt).setDate(dt.getDate() - daysToMonday));
  const weekEnd = new Date(new Date(weekStart).setDate(weekStart.getDate() + 7));
  return { weekStart, weekEnd };
};

function parseOpeningHours(openingHoursRaw, timeFormat){
    const openingHours = new opening_hours(openingHoursRaw,{ address: {country_code:"us"}});
    const {
        weekStart,
        weekEnd
    } = currentWeekRange();
    const intervals = openingHours.getOpenIntervals(weekStart, weekEnd);
    const timeRanges = {};
    intervals.forEach((interval)=> {
        const weekDay = dateToDayName(interval[0]);
        //init array if day key is missing
        if (!timeRanges[weekDay]) timeRanges[weekDay] = [];
        const hoursFrom = interval[0].toLocaleTimeString("en-US", {
            hour: "2-digit",
            minute: "2-digit",
            hour12: timeFormat ,
        });
        const hoursTo = interval[1].toLocaleTimeString("en-US", {
            hour: "2-digit",
            minute: "2-digit",
            hour12: timeFormat,
        });
        timeRanges[weekDay].push(`${hoursFrom} - ${hoursTo}`);
    });
    const todayValues = timeRanges[dateToDayName(new Date())];

    const today = new Date().getTime();
    const todayNextChangeDiff = openingHours.getNextChange() - today;
    const todayNextChangeDiffHours = Math.trunc(todayNextChangeDiff / (1000 * 60 * 60));

    return {
        timeRanges,
        todayValues,
        isItOpenNow: openingHours.getState(),
        nextChange: todayNextChangeDiffHours
    };
};

function Memo(props) {
  const handler = React.useMemo(() => {
      return _.debounce(props.handler, props.wait);
  }, [props.handler, props.wait]);
  return React.createElement("div", { className: handler() });
}


var propCases = [{
    handler: function() {
        return Math.random();
    },
    wait: 100
}, {
    handler: function() {
        return Math.random();
    },
    wait: 200
}];
propCases.push(propCases[1]);

Tests:

parseOpeningHours
propCases.forEach((props, i) => { parseOpeningHours('Mo,Tu,Th,Fr 12:00-18:00; Sa,PH 12:00-17:00; Th[3],Th[-1] off' , '12h') });
memo
propCases.forEach((props, i) => { ReactDOM.render(React.createElement(Memo, props, null), root); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
parseOpeningHours
memo

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents two test cases: `parseOpeningHours` and `memo`. We'll break down what's being tested, the options compared, their pros and cons, and other considerations.

**Test Case 1: parseOpeningHours**

This benchmark tests the performance of a function named `parseOpeningHours`, which is part of the `opening_hours` library. The function takes two arguments: an opening hours string and a time format.

Here's what's being tested:

* The `openning_hours` library is being used to parse the opening hours string.
* The function returns an object with several properties, including `timeRanges`, `todayValues`, `isItOpenNow`, and `nextChange`.

The benchmark definition uses the `propCases` array, which contains two objects with different handler functions and wait times. The `parseOpeningHours` function is called for each iteration of `propCases`.

**Options compared:**

* Different handler functions (e.g., `Math.random()`)
* Wait times (100ms or 200ms)

Pros:

* This benchmark tests the performance of a specific library (opening_hours) in different scenarios.
* It allows users to compare the results with and without the library.

Cons:

* The test is limited to two handler functions, which might not be representative of all possible use cases.
* The wait times are relatively short, which might not accurately reflect real-world performance.

**Test Case 2: memo**

This benchmark tests the performance of a React component named `Memo`. The component uses the `React.useMemo` hook to debounce a handler function.

Here's what's being tested:

* The performance of the `Memo` component with different wait times.
* The impact of debouncing on the component's execution time.

The benchmark definition uses the `propCases` array, which contains two objects with different handler functions and wait times. The `ReactDOM.render` method is used to render the `Memo` component for each iteration of `propCases`.

**Options compared:**

* Different wait times (100ms or 200ms)
* Debouncing vs. non-debouncing behavior

Pros:

* This benchmark tests the performance of a React component in different scenarios.
* It allows users to compare the results with and without debouncing.

Cons:

* The test is limited to two wait times, which might not be representative of all possible use cases.
* The impact of debouncing on the component's execution time might vary depending on other factors (e.g., network latency).

**Other considerations:**

* Both benchmarks use real-world-like data and scenarios, making them more relevant than simple microbenchmarks.
* The use of multiple browsers and devices in the benchmark result provides a more accurate representation of real-world performance.

If you're interested in alternative approaches or tools for benchmarking JavaScript code, here are some options:

1. **Benchmark.js**: A popular JavaScript benchmarking library that allows you to create custom benchmarks and compare results.
2. **Benchpress.js**: Another JavaScript benchmarking library that provides a simple way to create and run benchmarks.
3. **Microbenchmarking frameworks like Benchmark**: A Node.js module for creating microbenchmarks, which can be used with JavaScript code.

Remember that the choice of benchmarking tool or approach depends on your specific use case and requirements.

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
parseOpeningHours	154.6 Ops/sec
memo	5676.4 Ops/sec

Related benchmarks:

opening hours (version: 0)

Comparing performance of: parseOpeningHours vs memo

Created: 3 years ago by: Guest

Jump to the latest result

parseOpeningHours

memo

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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