Benchmark: UI Thread vs. Worker

Script Preparation code:

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL || window.oURL;
  
  var code = `function single(iterations) {
    let o; 
  
    for (let i = 1; i < iterations; i += 1) {
      o = { a: Math.random() };
      o.a += Math.random();
    }
  
    return o;
  }
  
  onmessage = function (e) {
    postMessage(single(e.data.iterations));
    close();
  };`;
  
  var bb = new Blob([code], { type: 'text/javascript' });
  var bbURL = URL.createObjectURL(bb);
  var worker = new Worker(bbURL);
  
  function parallel(iterations) {
    worker.onmessage = function (e) {
      URL.revokeObjectURL(bbURL);
      deferred.resolve();
    };
    worker.postMessage({ iterations });
  }
  
  function single(iterations) {
    let o; 
  
    for (let i = 1; i < iterations; i += 1) {
      o = { a: Math.random() };
      o.a += Math.random();
    }
  
    return o;
  }

Tests:

UI Thread
single(1000);
Worker Thread
parallel(1000);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
UI Thread
Worker Thread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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
UI Thread	116119.9 Ops/sec
Worker Thread	2912778.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON to explain what is tested, compared options, pros and cons, library usage, special JS features, and alternatives.

**What is being tested?**

The benchmark compares two approaches: running JavaScript code on the main thread (UI Thread) versus using a worker thread. The test case "UI Thread" runs a simple function `single(1000)` which generates an object with a random property and increments its value 1000 times. Similarly, the test case "Worker Thread" uses a parallel function `parallel(1000)` to achieve the same task on a worker thread.

**Options being compared:**

1. **UI Thread**: Running JavaScript code on the main thread (also known as the UI thread).
2. **Worker Thread**: Using a separate thread for executing JavaScript code, which can improve performance by offloading computationally expensive tasks from the main thread.

**Pros and Cons of each approach:**

**UI Thread:**

Pros:

* Simpler to implement
* Can leverage native browser APIs and optimizations

Cons:

* Main thread is responsible for handling user interactions, rendering, and event loops, which can lead to performance degradation.
* Limited CPU resources available on the main thread.

**Worker Thread:**

Pros:

* Can take advantage of multiple CPU cores and improve overall system performance
* Allows for more efficient use of system resources

Cons:

* Requires additional setup and management (e.g., creating a worker, handling messages)
* May introduce overhead due to the creation of a new thread.

**Library usage:**

The benchmark uses the `Worker` API, which is a built-in feature in modern web browsers. The `Worker` API allows developers to create a separate thread for executing JavaScript code, which can be useful for tasks like:

* Handling computationally expensive operations (e.g., encryption, scientific simulations)
* Improving responsiveness and handling user interactions on the main thread

**Special JS features:**

This benchmark does not use any special JavaScript features. However, if you were to modify the code to include features like async/await or Promises, it would likely affect the performance characteristics of the test.

**Alternatives:**

If you want to explore alternative approaches, consider:

1. **Web Workers**: A browser-specific API for creating worker threads.
2. **WebAssembly**: A binary format that allows running compiled code in web browsers, which can provide better performance and security than JavaScript.
3. **WorkerScripting languages**: Some frameworks, like Electron or Angular, support using worker scripting languages like C++ or TypeScript to improve performance.

Keep in mind that each approach has its trade-offs, and the choice of implementation depends on the specific requirements of your project.

Related benchmarks:

UI Thread vs. Worker (version: 0)

Comparing performance of: UI Thread vs Worker Thread

Created: 9 years ago by: Guest

Jump to the latest result

UI Thread

Worker Thread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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