Service Worker Cache Strategy Tester - Online Simulator
Simulate different cache strategies (Cache First, Network First, Stale‑While‑Revalidate) and see responses. Learn offline patterns.
UD5 Toolkit
Visualize how navigator.scheduling.isInputPending()
helps yield the main thread to keep UIs responsive during heavy computation.
Long task runs uninterrupted — input events are queued.
Checks for pending input & yields the main thread proactively.
navigator.scheduling.isInputPending() is a web API that allows JavaScript to check whether there are pending user input events (like clicks, key presses, or touches) waiting in the browser's event queue. It returns a boolean — true if input is waiting to be processed, false otherwise. This enables long-running tasks to proactively yield the main thread only when the user actually needs to interact, rather than yielding on a fixed schedule.
'scheduling' in navigator && 'isInputPending' in navigator.scheduling. For unsupported browsers, consider falling back to periodic setTimeout(0) yielding or using a polyfill.
click, keydown, keyup, mousedown, mouseup, touchstart, touchend — these indicate intentional user actions.{includeContinuous: true}): mousemove, wheel, touchmove, pointermove — these fire frequently during movement. Including them can cause excessive yielding, so only use this option when responsiveness to continuous input (like drawing or dragging) is critical.
isInputPending(), developers can break up long tasks and yield precisely when input is waiting, dramatically reducing interaction latency. This directly improves INP, Total Blocking Time (TBT), and the overall user experience — especially on slower devices or during heavy computation.
requestIdleCallback schedules work during browser idle periods — but it doesn't check for pending input specifically. A page can be "idle" in terms of rendering yet still have unprocessed input events. isInputPending() fills this gap by allowing synchronous, on-demand checking of the input queue, giving developers finer-grained control over when to yield. They can be used together for optimal scheduling.
setTimeout(0), postMessage, or scheduler.yield() to actually yield the thread.includeContinuous: true when necessary.false (or uses a timer-based heuristic) when isInputPending is unavailable. Combined with periodic setTimeout(0) yielding, this provides reasonable behavior across all browsers, though without the precision of the native API.
isInputPending() is designed to be extremely fast (sub-microsecond). It simply checks a flag maintained by the browser's event loop, without traversing the event queue or performing any heavy work. You can safely call it thousands of times per second. The real performance consideration is how often you yield — yielding too frequently can slow down the overall task, while yielding too rarely reduces responsiveness. Finding the right batch size is key.
scheduler.yield() is a newer proposal (part of the Prioritized Task Scheduling API) that actively yields the main thread and returns a promise. While isInputPending() is a read-only check, scheduler.yield() is an action. They complement each other: you can use isInputPending() to decide whether to yield, and scheduler.yield() (or setTimeout(0)) to actually perform the yield. This combination gives developers the most control over main-thread scheduling.
Simulate different cache strategies (Cache First, Network First, Stale‑While‑Revalidate) and see responses. Learn offline patterns.
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Start recording and watch for Long Tasks that block the main thread. See task duration and attribution. Improve Interaction to Next Paint.
Create half‑hour time blocks for your day. Drag to resize and reorder. Export as image. All local.
Fill in daily work hours and tasks, and generate a printable PDF timesheet. Clean, professional layout. Local.
Build a cron expression using plain English toggles and see its visual timeline. No memorization needed.
Enter a cron expression and get a plain English description of when it runs. Understand complex schedules instantly. Developer friendly.
Describe cron schedule expressions in plain English and test future execution times. Indispensable for DevOps and backend developers. Local analysis.
Fill in a component name and generate a complete Stencil.js component with TSX, CSS, and test files. Quick start.
Paste a corpus of text and generate new random sentences that mimic the style using Markov chains. Local only.
Toggle browser‑generated bold and italic when a real italic is missing. Understand and control font fallback rendering.
Paste a git log and generate a polished changelog grouped by type (feat, fix, etc.). Follows Keep a Changelog format. Local.
Type on your QWERTY keyboard and see the text as if you were on a Dvorak layout. Helps learn Dvorak without switching.
Compare standard keyboard layouts side-by-side. Click keys to see characters. Useful for learning alternative layouts.
Break a large block of text into a numbered list of sentences. Useful for analysis or translation. Local processing.
Take a normal sentence and reverse the word order. Sound like Yoda or just play with language.
Create multi‑step keyframe animations by adding stops and properties. Play and pause. Copy the complete CSS. Intuitive UI.
Generate a plausible technical blog post title. Useful for practice writing or placeholder content. All local.
Build a responsive masonry layout using the column‑count property. No JavaScript. Copy the minimal CSS.
Toggle scrollbar‑gutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.
Add a warm, orange light leak to your photo for a vintage film look. Adjust intensity and angle. Instant download.
Enter amount of kernels and see estimated popped volume. Plan movie night snacks perfectly.
Experiment with scroll‑state container queries to style elements when they are stuck, snapped, or overflowed. Experimental.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.
Process audio faster than real‑time with OfflineAudioContext. Apply filters and export the result. Dev tool.
Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.