Benchmark: evaluating strings

HTML Preparation code:

<div id="a"></div>

Script Preparation code:

let code = `${JSON.stringify(Array.from({length:300},(a,i)=>i))}.reduce((a,b)=>a+b)`,
    Eval = eval

Tests:

eval
eval(code)
indirect eval
Eval(code)
Function()
Function(code)()
^on.+$
a.setAttribute('onclick', code) a.click()
setTimeout
setTimeout(code)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
eval
indirect eval
Function()
^on.+$
setTimeout

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Linux

View result in a separate tab

Test name	Executions per second
eval	2214062.8 Ops/sec
indirect eval	1995268.1 Ops/sec
Function()	865034.6 Ops/sec
^on.+$	18710.5 Ops/sec
setTimeout	698108.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark provided evaluates the performance of different methods of executing JavaScript code that is generated as a string. This evaluation focuses on the handling of a specific piece of code generated in a preparation step.

### Description of the Evaluated Options

1. **eval(code)**:
   - **Test Name**: `eval`
   - **Description**: This method evaluates the string `code` directly within the current execution context.
   - **Pros**:
     - Simple and straightforward to use.
     - Allows access to local variables.
   - **Cons**:
     - Slower compared to other methods because of the way it is executed.
     - Security risks, as it can execute arbitrary code, leading to potential vulnerabilities.

2. **Eval(code)**:
   - **Test Name**: `indirect eval`
   - **Description**: This method uses the `Eval` variable that references `eval` in an indirect manner, allowing it to execute code without direct reference to `eval`.
   - **Pros**:
     - Slightly mitigates the risks associated with direct `eval` use in scope and context.
     - Similar usage to `eval`.
   - **Cons**:
     - Performance may still be similar to `eval`.
     - Still vulnerable to the same security issues.

3. **Function(code)()**:
   - **Test Name**: `Function()`
   - **Description**: This constructs a new function from the `code` string and immediately invokes it.
   - **Pros**:
     - Better performance than `eval`, as it compiles the code into a function.
     - Does not access variables in the outer scope, providing some encapsulation.
   - **Cons**:
     - Cannot access local variables from the outer context.
     - Slightly more complex to use when needing variable access.

4. **setAttribute('onclick', code) a.click()**:
   - **Test Name**: `^on.+$`
   - **Description**: This method involves setting the `onclick` attribute of an element with the `code` string and simulating a click.
   - **Pros**:
     - Integrated into the event-handling model of the browser.
     - Can be useful for dynamically generated event handlers.
   - **Cons**:
     - Performance is generally lower for executing code this way.
     - Requires DOM manipulation, which can introduce overhead.

5. **setTimeout(code)**:
   - **Test Name**: `setTimeout`
   - **Description**: This method schedules the execution of `code` after a timeout, running it as a separate asynchronous task.
   - **Pros**:
     - Allows code execution without blocking the main thread.
     - Can be useful for deferred execution.
   - **Cons**:
     - Introduces a slight delay (even if very short).
     - Performance is typically lower due to its async nature.

### Performance Results Analysis

The benchmark results indicate performance measured in executions per second:

- **eval** performed best at approximately 2.21 million executions per second.
- **indirect eval (Eval)** closely followed at around 1.99 million executions per second.
- **Function()** is significantly slower, completing approximately 865,000 executions per second.
- **setTimeout** showed a performance of about 698,000 executions per second.
- The method using `setAttribute` to handle `onclick` showed the least performance, at just over 18,000 executions per second.

### Considerations on Use Cases and Alternatives

**Considerations**:
- Security and performance trade-offs are substantial when deciding which method to use.
- For applications where performance is critical, `Function(code)` might be preferred for evaluating untrusted code since it is faster and can provide some level of encapsulation.

**Alternatives**:
- If code must be executed securely, consider using **Web Workers** for off-main-thread execution, or **Sandboxing** techniques to limit what code can access.
- For simple cases, consider refactoring to avoid the need for dynamic code evaluation altogether when possible, such as using dedicated functions or modules.
- Additionally, third-party libraries like WebAssembly could offer an alternative for certain computational tasks with improved speed and safety.

In summary, this benchmark provides valuable insights into the performance characteristics of different ways to evaluate JavaScript code strings, aiding software engineers in making informed decisions regarding code execution in their applications.

Related benchmarks:

evaluating strings (version: 1)

Comparing performance of: eval vs indirect eval vs Function() vs ^on.+$ vs setTimeout

Created: one month ago by: Guest

Jump to the latest result

eval

indirect eval

Function()

^on.+$

setTimeout

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):