在Webkit中同步重绘/等待DOM更新？ [英] Synchronous redraw in Webkit/Wait for DOM update?

问题描述

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

  element.style .webkitTransform =translate（0px， - + scrollY +px）; 
 snapShotPage（）; 
  

我知道在大多数浏览器（包括我的经验中的Webkit）中，一直等到脚本执行结束任何视觉上的变化，但是在我的情况下，我需要 snapShotPage（）在重绘/重绘发生之后运行，以获得准确的快照。有没有办法做到这一点？

我注意到使用 scrollTop 导致这种行为，但它不是一个选项在我的情况。是否有避免使用 setTimeout ？

解决方案

的解决方案像 - >代码 - >布局 - >画图

如果你的一些代码是基于绘制结果的，你必须改变它。浏览器的绘图工作不是同步工作流程的一部分，因此您需要事件队列的第二个代码块。

解决方案1：

  window.setTimeout（snapShotPage，0）; 
  

解决方案2：

使用< href =https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame =nofollow> 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 -> Paint

If 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更新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！