Skip to content

Comment on WebAssembly adoption: Is slow and steady winning the race?parent

Comments

It isn't two APIs, but there is effectively some batching. The main thing to focus on is triggering layouts. Basically you want to do all of your reads together then all of your writes.

For example imagine we are trying to move one element to the location of another one. This code will be slow because the read of `leader.offsetTop` will need recalculate the layout to see if that write of `follower.style.left` changed the position of `leader`.

    let x = leader.offsetLeft;
    follower.style.left = `${x}px`;
    let y = leader.offsetTop;
    follower.style.top = `${y}px`;
    
However the following code is fast because it can read all of the values that were calculated during the last render (for the user to see) and doesn't trigger an intermediate relayouts.
    let x = leader.offsetLeft;
    let y = leader.offsetTop;
    follower.style.left = `${x}px`;
    follower.style.top = `${y}px`;
But I am not aware of any explicit batching UI.
AboutSource Built by g1lg1l

Hackerly is an independent reader for Hacker News, built on the public HN API. Not affiliated with Y Combinator.