强制javascript在重新绘制浏览器之前运行*（JSFIDLE示例）

我正在使用HTML表构建一个基于web的小应用程序。此表的一个不寻常的特性是它有固定的顶行和左列（类似于excel）。我使用一点jQuery和CSS完成了这项工作

问题是，触发我的代码的jQuery事件是$（window）.scroll事件，显然大多数浏览器（Chrome和IE）在该事件调用的代码运行完成之前都会重新绘制页面。因此，左列和顶行需要一瞬间“赶上”表的其余部分

我提供了一份报告，以便向你说明我的问题注意：当表格很小且（相对而言）没有内容时，延迟不是很明显。尽管如此，它仍然存在（假设您不使用firefox）。有没有办法摆脱这种滞后

---

谢谢

只是一个想法，但可能值得考虑：您可以尝试使用中描述的

requestAnimationFrame

（或以类似方式）。这可能会消除更新/滞后问题。

我没有将其用于scroll事件或requestAnimationFrame。我最后做的是附加到mousewheel事件，该事件在滚动和渲染发生之前触发。如果滚动事件向下，我可以及时应用适当的类进行渲染。

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

requestAnimationFrame

允许您在重新绘制之前发出命令。因此，在requestAnimationFrame中所做的任何更改都将在下一次重新绘制中显示。它是浏览器在绘制网页时调用的回调。您的问题很可能是由于在绘制卷轴之后调用syncHeadColumns（您怀疑是什么原因）或由于发出了太多的卷轴回调-即每帧超过1个事件。这会导致视觉更新滞后（我个人认为这更可能）。在任何情况下：我相信

requestAnimationFrame

应该能够对这两个方面都有所帮助。我将尝试从

requestAnimationFrame

调用

syncHeadColumns

，而不是从滚动事件调用。这样可以减少对

syncHeadColumns

的调用量，但可以使标题平稳地定位。此外，如果您还不了解浏览器中的重绘和回流行为，您可能希望检查它们是如何工作的。某些元素和css属性在更改时会导致回流。对于

position:fixed

元素上的大多数属性，情况不应该是这样的，但可能我在您的代码中遗漏了一些导致回流的内容。非常感谢您的解释！这看起来是可行的，我可能会试一试。我在我的项目中实施了你的建议。它一开始可以工作，但是如果你稍微弄乱了页面（使用按钮等改变一些行高度），它就会开始慢下来。知道为什么会这样吗？很有趣+1用于共享。谢谢