Dom Event scheduling

gistfile1.txt

Dom Event scheduling

<yoshuawuyts> bret: the order of resolution per tick is:
16:18 bret: 1. microtasks; they're part of promises and mutationobservers but you can hook into them. See https://github.com/yoshuawuyts/nanotask
16:18 bret: 2. setTimeout(cb, 0) calls
16:18 bret: 3. requestAnimationFrame() calls
16:19 <bret> Bret Comnes is that all of them?
16:19 <yoshuawuyts> bret: now this is where it gets tricky. If there is any rendering, it'll happen now. If there is none, setTimeout() and RAF will resolve _again_ on the same tick. Not sure about microtasks but suspect them too
16:19 bret: but assuming we modified the dom:
16:20 bret: 4. the render pipeline triggers here. E.g. paints and reflows
16:21 bret: 5. requestIdleCallback() - but only if the tick has extra time available, and / or there's no new work scheduled for the next tick. It'll call callbacks in order until time is up or new work is scheduled
16:22 bret: ⚠️ if any DOM mutation is done inside of (5), it'll do a blocking repaint. This is Very Bad For Performance
16:22 bret: but super useful for all other things! :D
16:22 bret: anyway, that's about the gist of it
16:22 <bret> Bret Comnes so no touching the dom in 5
16:23 thanks! super handy
16:23 writing this down
New messages
16:23 <yoshuawuyts> bret: yep! - tho you could use it to create parts of the DOM tree - and then attach it on the next frame
16:23 <bret> Bret Comnes node just has setImmediate() and process.nextTick()... but the browser is a bit more complicated it seems