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

Question

我在我的网页中像这样操作 transform 属性以实现滚动效果:

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

我知道在大多数浏览器(包括我的经验中的 Webkit)中，要等到脚本执行结束才能进行任何视觉更改，但是在我的情况下，我需要 snapShotPage() 来运行 在重绘/重绘发生后，为了获得准确的快照。有什么办法吗？

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

Answer 1

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

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

解决方案一:

window.setTimeout(snapShotPage, 0);

解决方案 2:

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

解决方案 3:

对 DOM 事件使用react并通过 MutationObserver 调用 snapShotPage 更改事件