<div dir="ltr">On Thu, May 4, 2017 at 12:20 PM, Mike Conley <span dir="ltr"><<a target="_blank" href="mailto:mconley@mozilla.com">mconley@mozilla.com</a>></span> wrote:<br><div class="gmail_extra"><div class="gmail_quote"><blockquote style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex" class="gmail_quote">
Instead, we should strive to move all DOM writes into<br>
requestAnimationFrame callbacks. That way, we batch DOM writes so that<br>
they all occur just before the refresh driver causes the Style and<br>
Layout steps. If DOM writes _only_ happen inside requestAnimationFrame<br>
callbacks, that means that in the rest of our JS, querying for the size<br>
and position of things should use the cached Style and Layout<br>
information from the previous tick, and be pretty cheap.<br>
<br>
As soon as we write to the DOM within non-rAF JS though, the next person<br>
to query for size / position information loses.<br>
<br>
This might seem obvious to some, but it was something I don't think I<br>
fully understood until now. I honestly didn't know the details about<br>
when requestAnimationFrame ran in the pipeline.<br></blockquote><div class="gmail-h5"><br>So, since it seems like this is something we should be striving <br>to do as broadly as possible, and we've been transitioning a lot <br>of our code to use async functions, I have two questions:<br><br>1) Is it safe to perform DOM work in a promise handler triggered <br>by requestAnimationFrame? We flush the promise microtask queue <br>before returning to the main event loop, but I'd like someone to <br>confirm that that won't be too late to get any benefits from <br>using requestAnimationFrame. And,<br><br>2) If so, should we consider adding a promiseAnimationFrame <br>helper somewhere to make it easier to use this from more of our <br>UI code? I can already think of a few async functions it would <br>make sense to add that to, so there are almost certainly more. <br>It would be nice if it were as easy as possible to use this <br>consistently where it makes sense.<br><br>-Kris<br></div></div></div></div>