Web Worker Heavy Task Demo - Online Non‑Blocking
Run a CPU‑heavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.
UD5 Toolkit
scheduler.postTask(). This demo will use a fallback (setTimeout) and priorities will not be honored.
Visualize how the scheduler.postTask() API schedules tasks with different priorities (user-blocking, user-visible, background). Add tasks, set delays, cancel them, and watch the execution order in real time.
“Run” will schedule all pending tasks using scheduler.postTask().
| Name | Priority | Delay | Status | Action |
|---|---|---|---|---|
| No tasks added yet. Add some above! | ||||
scheduler.postTask() is a modern browser API that allows developers to schedule tasks with a specified priority. It helps the browser decide which tasks to run first, improving responsiveness by prioritizing user-facing work over background operations.setTimeout simply schedules a callback after a minimum delay without considering priority. scheduler.postTask() allows the browser to interleave tasks based on their importance, leading to smoother user experiences, especially under load.AbortSignal (from an AbortController) to the options. When controller.abort() is called, the task is cancelled before it starts, and the promise rejects with an AbortError.scheduler.postTask() is supported in Chromium-based browsers (Chrome, Edge, Opera). Firefox and Safari are still evaluating the specification. This demo includes a fallback for unsupported browsers.Run a CPU‑heavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.
Select a caching strategy and see a flow diagram of how requests are handled. Learn PWA patterns.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Build <link> tags for preload, prefetch, preconnect, and dns‑prefetch. Improve page load speed with correct priorities. Copy the optimized HTML.
Divide your day into blocks with color codes. Drag tasks into slots. See free time at a glance.
Pick a random icebreaker question or activity for remote meetings. Never start a meeting awkwardly again.
Adjust root, margin, and threshold. See a live log of intersection events as you scroll. Debug lazy loading.
Place rectangular pattern pieces on a virtual fabric width to optimize cutting layout and reduce waste. Simple manual drag & drop. Local only.
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Set recurring reminders for nail trims based on species growth rate. Never forget.
Compress text with Brotli at different quality levels. See size reduction and time. Find the sweet spot for your static assets.
Reorder a list of items by dragging them. Paste a list, sort it by hand, and copy the new order. Simple.
Paste GeoJSON and instantly see it drawn on a draggable map. Supports points, lines, and polygons. Local fetch of tiles.
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Log how many times you've passed clay through the pasta machine. Ensure thorough conditioning without guesswork.
List cached responses for your domain. View headers, content, and delete individual entries. Understand your PWA's cache.
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSS‑in‑JS trade‑offs.
Apply content‑visibility: auto to off‑screen sections and see the rendering cost drop. Demos for infinite scroll optimization.
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Enter income, pay frequency, and expected deductions to estimate your tax refund or balance due. Simplified model.
Set start and end times for a video and trim it without re-encoding. Download the clip. Pure browser.
Calculate daily/monthly/yearly electricity cost of any appliance based on wattage, hours used, and your kWh rate. Compare multiple devices. Fully offline.
Build a virtual grocery list with estimated prices and see total before you shop. Adjust quantities, mark bought items. Data stays in browser.
Display used/total/limit JS heap size using performance.memory. Take snapshots and see growth. Simple memory leak detection.
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
Generate a balanced lunchbox meal suggestion (main + sides) with a click. Prevent lunch rut. No account, local.