wilsonpage/fastdom

★ 6,921JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((fastdom))
    What it does
      Batch DOM reads
      Batch DOM writes
      One frame per cycle
    How it works
      measure method
      mutate method
      Cancel jobs
    Extensions
      Promise API
      Strict mode
    Benefits
      No layout thrashing
      App-wide batching

mindmap root((fastdom)) What it does Batch DOM reads Batch DOM writes One frame per cycle How it works measure method mutate method Cancel jobs Extensions Promise API Strict mode Benefits No layout thrashing App-wide batching

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add FastDom to any web app to prevent janky animations caused by mixing DOM reads and writes in the wrong order

USE CASE 2

Use the strict mode addon during development to automatically detect and throw errors on layout-thrashing code before it ships

USE CASE 3

Wrap third-party library DOM calls in FastDom so they batch together with the rest of your app updates without coordination

USE CASE 4

Chain a DOM measurement followed by a DOM mutation using the Promise extension for cleaner asynchronous code

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose including commercial projects as long as you keep the copyright notice.

In plain English

FastDom is a tiny JavaScript library that solves a specific browser performance problem called layout thrashing. When JavaScript code reads visual information from the page (such as an element's width or position) and then writes changes to the page (such as setting a new width), browsers often have to recalculate the entire page layout between each read and write. If this happens many times in quick succession, the page can become slow and janky. FastDom fixes this by collecting all reads into one batch and all writes into another, then executing reads first and writes second, once per animation frame. This way the browser only needs to recalculate layout once instead of many times. The API has two main methods: measure for scheduling reads from the page and mutate for scheduling writes. Instead of calling DOM operations directly, developers wrap them in these two methods, and FastDom arranges them in the correct order automatically. Any scheduled job can also be cancelled before it runs. Because FastDom is a singleton, it works across an entire application including third-party libraries that also use it. All tasks from different parts of the code feed into the same global queue, so the batching benefit applies everywhere without coordination. The library ships with optional extensions. One adds a Promise-based API so read and write operations can be chained. Another adds task grouping. A development-only strict mode addon throws errors when DOM operations happen outside the correct phase, which helps catch performance mistakes during development before they reach production. The core library is about 600 bytes when compressed, making it lightweight enough to include in nearly any project. It is MIT licensed.

Copy-paste prompts

Prompt 1

Using FastDom, rewrite this animation loop so all reads use fastdom.measure() and all writes use fastdom.mutate(), here's my current code: [paste code]

Prompt 2

My web page feels janky during scroll. Show me how to wrap my DOM read-write cycle in FastDom to batch them into a single animation frame.

Prompt 3

How do I enable FastDom's strict mode addon in development to catch layout-thrashing bugs, and what error does it throw when it detects a violation?

Prompt 4

Show me how to use FastDom's Promise extension to first measure an element's width and then set a sibling's width to match it.

Open on GitHub → Explain another repo

← wilsonpage on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.