Working on porting my home-grown plugins to PM plugins, and I want to avoid the dreaded red frames in the profiler timeline. I’ve done the work to separate my plugin to readDOM and writeDOM phases (that loops back if the write does something that needs remeasuring.
Passing data through these phases isn’t too difficult, but requires discipline. Does anybody know about a profiler or other trick to make sure certain functions only read or write DOM?
It works, but I’ve noticed that some stuff in my read phase (eg reading el.offsetTop) forces a layout. Should that be separated out in the sequence somehow?
I agree that debugging and testing phased DOM updating is way too hard, but I haven’t found a way to improve that. I do hope that at some point, browsers fire an event when layouting, so that we could set up our test suite to fail when relayouts are triggered at unexpected moments.
Having a layout fire the first time your dom reading code does a read is expected (if it’s not preceded by other dom-reading code). But of course, if you’re accidentally writing to the dom, that’ll result in an additional layout for the next read.
(If you, or anyone else, knows of other approaches to this kind of DOM access synchronizing that they think might be preferable, definitely point me at them.)