Fastdom – a weapon in the war against jank
github.com
github.com
We can have many independent components, each one independently reading and modifying DOM however it wants, but all of that goes asynchronously through fastdom that acts as a scheduler.
It still has a nice bug where it reserves space for ads, then when it fails to download them (because you're offline) after 60s the whole page reflows (losing your position). Plus the classic loss of scroll position on screen rotation.
But it loads in Chrome.
el.style.color = "red" // write
console.log(el.style.color) // read
el.style.color = "green" // write
console.log(el.style.color) // read
Outputs: "red" then "green".Batched: it outputs "green" then "green".
First, I can't use fastdom-strict.js to help with the integration, because of course I'm using other scripts (pace.js, jquery, Magnific Popup, a detail-polyfill and Flot). Am I missing something here to apply that selectively?
But also my own code would need transformation. It's quite common to have Dom reads and writes on the same line, all of them would have to be separated and variables be created… That is not impossible much work, but together with the other libraries not nice.
It would be way better if this would patch the existing functions (maybe on jQuery side?) to automatically batch DOM reads and writes, without having to take care of that at the side of the developer. But the asynchronity introduced by that concept would break a lot, this would then need callbacks or promises (I think at least?).
Do not understand me wrong, if this works as hoped, I think this might a really useful library, but I'm curious if it's worth the trouble of implementing.
- http://wilsonpage.github.io/fastdom/examples/animation.html
- http://wilsonpage.github.io/fastdom/examples/aspect-ratio.ht...
Especially the animation example shows a very noticeable improvement.