我有一个数据表，其中包含一些悬停激活的弹出窗口。这些弹出窗口只是div元素，最初设置为position: absolute和display: none;几行JavaScript然后根据鼠标悬停隐藏或显示它们。每个弹出窗口都附有一个flot line graph。
除了一个故障外，这个工作非常快速。当图形是这样的弹出窗口的一部分时，Flot有一个错误导致x轴和y轴标签在左下角重叠。简而言之，解决方案是在生成图形之前显示包含div。
我尝试了一个解决方案，其中我从CSS中删除了每个弹出div的初始display: none。我还删除了background-color和border样式元素，有效地使这些div不可见。然后一些简单的jQuery生成图形并为这些弹出窗口设置正确的CSS样式（设置背景颜色，边框等）。这在功能上有效。图标签现在已正确定位。但它慢。它很容易使页面的加载时间增加三倍，这是不可接受的。
只需将display: none添加回弹出div的初始CSS即可解决所有性能问题。所以jQuery代码本身不能成为瓶颈。但这当然会导致标签格式再次混乱。
有人知道如何克服这个问题吗？
答案 0 :(得分：1)
正如您所发现的，Flot必须绘制到附加到DOM的div。我不能没有一个例子肯定地说，但我猜你的性能缓慢可能是因为div即使没有内容，仍然在屏幕上，所以你正在触发重绘每当你改变它们时。
不是隐藏背景和边框，而是将div绝对放置在远离屏幕的位置，例如top:-9999px; left:-9999px。这样它仍处于布局状态，因此Flot可以进行测量，但浏览器非常智能，不会在屏幕外重绘。
答案 1 :(得分：0)
我通过推迟每个图的生成直到触发了初始相应的鼠标悬停事件来解决问题。我还必须首先将包含div的z-index设置为-1，然后在生成图形时将其更改为1;否则隐形div会“掩盖”其他页面内容，这样就无法在生成图形之前点击div后面的链接。