Webkit / 等待DOM更新中的同步重绘？

【问题标题】：Synchronous redraw in Webkit/Wait for DOM update?Webkit / 等待DOM更新中的同步重绘？
【发布时间】：2013-06-19 02:13:47
【问题描述】：

我正在我的网页中像这样操作转换属性以实现滚动效果：

element.style.webkitTransform = "translate(0px, -"+scrollY+"px)";
snapShotPage();

我知道在大多数浏览器中（包括我的经验中的 Webkit）等到脚本执行结束才能进行任何视觉更改，但是在我的情况下，我需要 snapShotPage() 来运行 after redraw/已发生重绘，以便获得准确的快照。有没有办法做到这一点？

我注意到使用 scrollTop 会导致这种行为，但在我的情况下这不是一个选项。有没有避免使用setTimeout的解决方案？

【问题讨论】：

【解决方案1】：

总是这样 -> 代码 -> 布局 -> 绘画

如果您的某些代码基于绘制结果，则必须对其进行转换。浏览器的绘制工作不是同步工作流的一部分，因此您需要事件队列的第二个代码块。

解决方案 1：

window.setTimeout(snapShotPage, 0);

解决方案 2：

使用requestAnimationFrame 并在下一帧调用 snapShotPage 函数。

解决方案 3：

对 DOM 事件做出反应并通过 MutationObserver 调用 snapShotPage 更改事件

【讨论】：

优秀的答案！对于其他人来说，解释事件队列/执行顺序部分可能是值得的。谢谢。
刚刚看到更新。我认为任何突变事件都不会响应重绘/重绘？
@mattcurtis 是的，MutationObserver 不响应重绘是正确的！仅对添加节点之类的 DOM 操作，等等。问题表明存在对样式的操纵。现在有趣的部分是，如果 MutationObserver 在绘制之前或之后触发？