Orders on a thread

Matching orders

Revenue

Average order

Top customer

Orders on the worker: Keystroke to result: Long tasks, 5 s: Crossed since load:


#	Customer	Product	Region	Total

What is going on

This page holds 200,000 orders and recomputes five things on every keystroke: how many orders match the filter, their revenue, the average order, the customer with the largest total, and the fifty orders in the table on the left. That work takes 100 to 200 milliseconds, longer than a frame. The two buttons in the header decide where it runs. A click on a column header is a second input: the sort goes to the same place the filter does, and a different fifty comes back.

Main thread

The orders are a plain WildflowerJS store on the page. A keystroke writes the filter into it, the computed properties re-evaluate, and the bindings update. While that runs, nothing else on the page can: the green dot stops, the clock holds its value, and letters typed during the stall arrive together when it ends. Each keystroke shows up in the long-task count.

Worker

The same definition runs as a thread: a store that lives on a Web Worker, loaded through the Threads extension. The orders are declared workerOnly, so they never leave the worker. A keystroke sends the filter across as one small message; the worker recomputes and sends back four numbers and fifty rows. The page's store is a mirror of those results, and the same bindings read it. The dot and the clock keep moving, because the main thread is only ever handling a message and painting.

The readouts

Keystroke to resulttime from the keystroke to the frame that painted its answer. On the worker this includes the round trip. Long tasks, 5 stasks over 50 ms on the main thread in the last five seconds, from PerformanceObserver, with the blocking time beyond 50 ms summed. Crossed since loadbytes the worker has sent to the page, measured as JSON. Five keystrokes cost about 20 KB. The 200,000 rows are not in that number because they never cross. Computing on the workershown while a message is out; it is the store's pending field.

What to try

Type a name on the main thread and watch the dot. Switch to the worker and type the same name. Hold a key down on the worker: the keystrokes that arrive while it is busy are applied together, one recompute for the newest input. Change the region while typing; that is a second input on the same thread.

The code

The definition is orders-thread.js, one file that runs on both sides. The page is app.js; its only knowledge of the worker is the subscribe: ['orders'] line and the toggle. The Threads page documents the extension.