Web Worker Threads for Real-Time Data Rendering

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Traditional approaches to rendering large volumes of data on user interfaces, such as financial trading platforms, often encounter thread blockages due to processor-intensive operations, leading to unresponsive interfaces and sluggish data refresh, especially when performing complex operations like grouping, aggregation, or filtering in real-time.

Innovation Solution

The use of web worker threads to process and render data on client devices, allowing for concurrent real-time data streaming and complex operations without interrupting the user interface, utilizing data worker threads for data fetching and aggregation worker threads for CPU-intensive computations and incremental updates using JavaScript Object Notation (JSON) data diff.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Ease of operation

If traditional single-threaded approaches are used to render large volumes of data on user interfaces, then the interface can remain simple in structure, but the interface becomes unresponsive and sluggish due to thread blockages from processor-intensive operations

Engineering Contradiction:

Improveinterface responsivenessVSAvoidthread management complexity

Core Design Contradiction:

Ease of operationVSDevice complexity

Solution Approach 1:

The patent divides the data processing workload into separate web worker threads that run independently from the main UI thread. Data fetching, complex operations (grouping, aggregation, filtering), and UI rendering are segmented into distinct threads, allowing them to execute concurrently without blocking each other, thus maintaining interface responsiveness while handling large data volumes

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The patent introduces web worker threads as intermediary components between the data source and the UI. These worker threads act as mediators that process data in the background and communicate results to the UI thread through message passing, preventing direct blocking of the UI thread while still enabling real-time data processing and rendering

Inventive Principle:

Principle #24Intermediary (Mediator)

2Productivity

If complex operations like grouping, aggregation, or filtering are performed in real-time on streaming data, then data processing capability is improved, but thread blockages occur causing unresponsive interfaces

Engineering Contradiction:

Improvereal-time data processing capabilityVSAvoidinterface responsiveness

Core Design Contradiction:

ProductivityVSReliability

Solution Approach 1:

The patent segments real-time data processing operations into dedicated web worker threads that handle complex operations (grouping, aggregation, filtering) independently from the UI thread. This allows CPU-intensive processing to occur concurrently with UI rendering, maintaining both real-time processing capability and interface responsiveness

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The patent ensures continuous data processing by implementing asynchronous data fetching and processing pipelines using web workers. Data streaming, processing, and UI updates occur continuously without interruption, as worker threads maintain persistent connections to data sources and process incoming data streams in real-time without blocking the UI

Inventive Principle:

Principle #20Continuity of useful action

3Loss of time

If all data is rendered immediately on the user interface, then data freshness is improved, but performance degradation occurs due to processor-intensive operations

Engineering Contradiction:

Improvedata refresh timingVSAvoidoverall system performance

Core Design Contradiction:

Loss of timeVSProductivity

Solution Approach 1:

The patent performs preliminary data processing operations in web worker threads before data needs to be displayed. Complex operations such as grouping, aggregation, and filtering are executed in advance on incoming data streams, so that processed data is ready for immediate UI rendering without causing performance degradation during the actual display update

Inventive Principle:

Principle #10Preliminary action

Solution Approach 2:

The patent replaces the traditional synchronous mechanical processing model with an asynchronous event-driven architecture using web workers. Instead of blocking the UI thread to perform CPU-intensive operations, the system uses message passing and event callbacks to substitute the direct mechanical execution model, allowing data processing and UI rendering to proceed independently and efficiently

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

Data Source

PatentUS11922186B2Data rendering for applications

Publication Date: 2024.03.05 THE TORONTO DOMINION BANK

AI summary

One example method includes receiving, at a client device, an input to present data corresponding to an application. In response to the input, a first user interface for the application is displayed using a web browser on the client device. A streaming data service corresponding to data to be displayed is identified, the streaming data service hosted by a server. A first web worker thread corresponding to the web browser is used to subscribe to the streaming data service. New data corresponding to the streaming data service is obtained using the first web worker thread from the server, and provided to a second web worker thread corresponding to the web browser. The second web worker thread is used to process the new data and prepare for presentation on the first user interface.