In my plugins (such as tooltips and the like), I both get element bounding boxes as well as moving around elements within the DOM (like repositioning the tooltips), which is causing a big slowdown as it seems the DOM has to recalc itself to get the right results. As a result I am getting 300ms javascript reflow cautions.
I wonder what strategies I should take to either separate the calc part from the update part or otherwise get my plugins to work faster. Where my tooltips are placed all depends on the results from getting the screen positions of the associated paragraphs.
Try to synchronize the read/write phases—i.e. do all the writing that has to happen before any reading happens, then, all the reading, then, when necessary, another write phase. You can set up a simple callback system where components ‘register’ readers and writers to add them to a queue, then work through the queue in a loop.
Marijn, not quite sure how to implement what you are saying - the plugins get paragraph (node’s) bounding rects and then set the tooltip’s absolute position using those positions. I guess the idea of ‘registering readers and writers’ and then at somehow after the plugins are done updating the DOM is not clear in my head.