Benchmark: get navigation type

HTML Preparation code:

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

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

actual
var page_view_navigate, page_view_reload, page_view_back_forward; var type = performance.getEntriesByType('navigation')[0].type; var navigationType = function(type) { if (type === 'navigate') { page_view_navigate = 1; return '0'; } else if (type === 'reload') { page_view_reload = 1; return '1'; } else if (type === 'back_forward') { page_view_back_forward = 1; return '2'; } else { return '255'; } }; var page_reload = navigationType(type);
future
var getNavigationType = function () { var type = performance.getEntriesByType('navigation')[0].type; switch (type) { case 'navigate': return { pageViewNavigate: 1, value: '0' }; case 'reload': return { pageViewReload: 1, value: '1' }; case 'back_forward': return { pageViewBackForward: 1, value: '2' }; default: return { value: '255' }; } }; var navigationInfo = getNavigationType(); var page_view_navigate = navigationInfo.pageViewNavigate; var page_view_reload = navigationInfo.pageViewReload; var page_view_back_forward = navigationInfo.pageViewBackForward; var page_reload = navigationInfo.value;
direct
var page_view_navigate, page_view_reload, page_view_back_forward; var navigationType = function() { try { var type = performance.getEntriesByType('navigation')[0].type; if (type === 'navigate') { page_view_navigate = 1; return '0'; } else if (type === 'reload') { page_view_reload = 1; return '1'; } else if (type === 'back_forward') { page_view_back_forward = 1; return '2'; } else { return '255'; } } catch (error) { return '255'; } }; var page_reload = navigationType();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
actual
future
direct

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
actual	2265627.2 Ops/sec
future	2279480.5 Ops/sec
direct	2283240.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 18 days ago):

LLMs can make mistakes. Check important info.

The provided benchmark examines the performance of two different implementations of a function that determines the type of navigation event on a webpage using the `performance.getEntriesByType('navigation')` API. This API provides information about navigation events, such as whether the user navigated to the page for the first time, reloaded it, or navigated forwards/backwards in the page history.

### Test Cases Overview

1. **Actual Test Case**:
   - **Benchmark Definition**:
       ```javascript
       var type = performance.getEntriesByType('navigation')[0].type;
       var navigationType = function(type) {
           if (type === 'navigate') {
               page_view_navigate = 1;
               return '0';
           } else if (type === 'reload') {
               page_view_reload = 1;
               return '1';
           } else if (type === 'back_forward') {
               page_view_back_forward = 1;
               return '2';
           } else {
               return '255'; // Unknown type
           }
       };
       var page_reload = navigationType(type);
       ```
   - **Description**: This implementation uses an `if-else` chain to check the navigation type. It has side effects by incrementing counters for page views based on the navigation type.

2. **Futuro Test Case**:
   - **Benchmark Definition**:
       ```javascript
       var getNavigationType = function () {
           var type = performance.getEntriesByType('navigation')[0].type;
           switch (type) {
               case 'navigate':
                   return { pageViewNavigate: 1, value: '0' };
               case 'reload':
                   return { pageViewReload: 1, value: '1' };
               case 'back_forward':
                   return { pageViewBackForward: 1, value: '2' };
               default:
                   return { value: '255' }; // Unknown type
           }
       };
       ```
   - **Description**: This implementation relies on a `switch` statement to identify the navigation type and returns an object encapsulating both the type and a corresponding value.

### Comparison of Approaches

#### **Pros and Cons**

1. **Actual (If-Else) Implementation**:
   - **Pros**:
     - Straightforward and easy to understand for simple conditions.
     - May perform slightly better with fewer branches for a small number of checks.
   - **Cons**:
     - Harder to extend if new navigation types are introduced, requiring additional conditional statements.
     - Side effects (incrementing counters) can lead to bugs if the function is called multiple times without resetting the counters.

2. **Futuro (Switch) Implementation**:
   - **Pros**:
     - More organized when dealing with multiple conditions; easier to read and extend.
     - Returns an object, which provides a clear structure for potential expansion or additional details.
   - **Cons**:
     - Could be perceived as more complex due to object creation and switching logic, which might slightly impact performance in extremely performance-critical scenarios.
   
### Performance Results Analysis

- Both implementations were tested in Chrome 131 on a Windows desktop.
- The **futuro** test case achieved approximately **1640675.75 executions per second**, while the **actual** test case was significantly faster, with **131832984.0 executions per second**.
- The performance difference suggests that the `if-else` chain might be more optimized in this scenario, perhaps due to the smaller overhead relative to object creation in the `switch` case.

### Other Considerations and Alternatives

- **Performance Issues**: It's essential to note that performance can be highly context-dependent. Depending on browser optimizations and the specific usage pattern in an actual application, differences in performance may vary.
  
- **Libraries**: This benchmark does not utilize any external libraries; rather, it leverages native browser APIs provided by the JavaScript environment.

- **Alternatives**: 
  - Instead of using a direct function call, developers could use mapping strategies (e.g., a lookup table) to determine navigation types more efficiently.
  - Additionally, for modern applications, leveraging frameworks (like React or Vue) would involve different performance considerations due to state management and rendering optimizations.

In conclusion, when developing performance-sensitive features, it's critical to vertically benchmark different approaches, as nuances in implementation can lead to significant differences in execution speed and maintainability.

Related benchmarks:

get navigation type (version: 2)

Comparing performance of: actual vs future vs direct

Created: 18 days ago by: Registered User

Jump to the latest result

actual

future

direct

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 18 days ago):