强制让JavaScript在浏览器重新绘制之前运行（jsFiddle示例）

Question

我正在使用HTML表格构建一个小型的基于Web的应用程序。这个表格的一个不寻常的特性是它具有固定的顶部行和左侧列（类似于Excel）。我使用了一些jQuery和CSS来实现它。

问题是，触发我的代码的jQuery事件是 $（window）.scroll 事件，显然大多数浏览器（Chrome和IE）在调用此事件的代码运行完成之前重新绘制页面。结果，左边的列和顶部的行需要花费片刻时间才能“赶上”到表格的其余部分。

我提供了一个简化的jsFiddle示例以展示我的问题。注意：当表格如此小且（相对而言）内容很少时，延迟并不是非常明显。尽管如此，除非您使用firefox，否则仍会存在。有没有办法消除这种滞后现象呢？

谢谢！

- ihake

Answer 1

我无法使用滚动事件或requestAnimationFrame使其正常工作。最终我选择了侦听mousewheel事件，该事件在滚动和渲染发生之前触发。如果滚动事件向下滚动，我可以及时应用适当的类以进行渲染。

- mbarkhau

---

有趣！点赞分享。谢谢。 - ihake

Answer 2

这只是一个想法，但或许值得考虑：您可以尝试使用requestAnimationFrame，如此文章所述（或类似的方式）。这可能会使更新/“延迟”问题更加平滑。

- Daniel Baulig

---

也许我对raf的工作方式有所误解，但似乎这并不能完全解决我的问题，因为我的问题涉及到帧被过早绘制。是这样吗？还是有什么我没有理解的地方？ - ihake

requestAnimationFrame 允许您在重绘之前发出命令。因此，您在 requestAnimationFrame 中所做的任何更改都将显示在下一次重绘中。它是一个回调函数，在浏览器即将绘制网页时被调用。您的问题很可能是由于在滚动绘制完成后立即调用 syncHeadColumns（您怀疑的原因）或由于发出了太多的滚动回调 - 即每帧超过1个事件。这会导致视觉更新的延迟（我个人认为这更有可能）。无论如何：我相信 requestAnimationFrame 应该能够同时解决这两个问题。 - Daniel Baulig

我会尝试从requestAnimationFrame而不是滚动事件中调用syncHeadColumns。这应该会减少对syncHeadColumns的调用次数，但仍然可以使标题平稳地保持在原位。此外，如果您还没有了解浏览器的重绘和回流行为，您可能需要检查一下。某些元素和CSS属性在更改时会导致回流。对于大多数position:fixed元素上的属性来说，这不应该是问题，但也许我在您的代码中忽略了某些引起回流的东西。 - Daniel Baulig

非常感谢您的解释！看起来可行，我可能会尝试一下。 - ihake

你知道这个例子有什么不同吗？https://dev59.com/ZmjWa4cB1Zd3GeqPs6xl - jedierikb