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

本文介绍了在Webkit中同步重绘/等待DOM更新？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我在我的网页中操作转换属性，以实现滚动效果： element.style .webkitTransform =translate（0px， - + scrollY +px）; snapShotPage（）; 我知道在大多数浏览器（包括我的经验中的Webkit）中，一直等到脚本执行结束任何视觉上的变化，但是在我的情况下，我需要 snapShotPage（）在重绘/重绘发生之后运行，以获得准确的快照。有没有办法做到这一点？ 我注意到使用 scrollTop 导致这种行为，但它不是一个选项在我的情况。是否有避免使用 setTimeout ？解决方案的解决方案像 - >代码 - >布局 - >画图 如果你的一些代码是基于绘制结果的，你必须改变它。浏览器的绘图工作不是同步工作流程的一部分，因此您需要事件队列的第二个代码块。 解决方案1： window.setTimeout（snapShotPage，0）; 解决方案2： 使用 requestAnimationFrame 并在下一帧调用snapShotPage函数。 解决方案3： 对DOM事件进行响应并通过 MutationObserver I'm manipulating the transform property like so in my webpage in order to achieve a scrolling effect:element.style.webkitTransform = "translate(0px, -"+scrollY+"px)";snapShotPage();I know that in most browsers (including Webkit from my experience) wait until script execution is over to make any visual changes, however in my case, I need snapShotPage() to run after redraw/repaint has occurred, in order to get an accurate snapshot. Is there any way to do this?I noticed that using scrollTop causes this behavior, however it's not an option in my case. Is there a solution that avoids using setTimeout? 解决方案 It is always like -> Code -> Layout -> PaintIf some of your code is based on paint result, you have to shift it. The paint work of the browser is not part of a synchronous workflow, so you need second code block for the event queue.Solution 1:window.setTimeout(snapShotPage, 0);Solution 2:Use the requestAnimationFrame and call the snapShotPage function at the next frame.Solution 3:React on a DOM event and call the snapShotPage change event via MutationObserver 这篇关于在Webkit中同步重绘/等待DOM更新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！