Highcharts 鼠标跟踪/鼠标悬停功能在 chrome 上很慢，但在 Firefox 或 IE 上并不慢

Posted 2023-02-22

【中文标题】Highcharts 鼠标跟踪/鼠标悬停功能在 chrome 上很慢，但在 Firefox 或 IE 上并不慢

【英文标题】：Highcharts mouse tracking/mouseover feature is slow on chrome but not slow in firefox or IE

【发布时间】：2014-11-05 15:14:01

【问题描述】：

我们有一个使用 Codeigniter 和 php 构建的 webapp，它在客户端使用 Highcharts 库和 javascript/html，并部署在 IIS 上。

Highcharts 库在屏幕上呈现各种图表，准确地说是 5。每个图表呈现不超过 1000 行的数据。

图表绘制得很好，但是当鼠标悬停在图表周围时，鼠标悬停在框架中（仅在 chrome 上）。请参阅下图，显示由鼠标跟踪引起的帧滞后。

令人惊讶的是，这种行为只在 chrome 上观察到，而在 IE 或 firefox 中没有观察到。

任何人都可以通过建议如何克服 chrome 上的这种不良鼠标跟踪来提供帮助。 Highcharts 有一个鼠标跟踪器禁用选项，但如果它被禁用，我们会失去交互性和鼠标悬停功能。

任何帮助克服这个问题或改进 chrome 上的鼠标悬停帧渲染将不胜感激。

使用 Highcharts 2.0.4 版本，现已更新到最新版本 4.0.4

工具提示代码如下，使用箱形图和面积图的基本工具提示选项。

tooltip: 
            formatter: function() 
                        return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
                       //return "hello";
             
        

【问题讨论】：

有没有可以给我们提供一个例子，尝试调试？否则，可能知道答案的人数将大大减少。

@HristoValkanov，已更新。我正在使用 Highcharts 的基本工具提示选项。在 IE 和 firefox 上工作得很好，但在 chrome 上却不行。如果您需要更多信息，请告诉我。

您是否尝试过同时更新 chrome 和库？ webkit 和 highcharts 似乎有很多问题，但它们应该在最新版本中得到修复。

@HristoValkanov，更新了 chrome，但仍然没有改进。将尝试使用最新版本的 Highcharts 并返回。谢谢

可能与 Chrome 中已知的 bug 有关，报告 here

【参考方案1】：

这是 Webkit 中的一个错误。这是官方的 Chromium 错误报告：

Bugs.Webkit : hover over table rows causes the whole table to repaint

此问题已根据 2014-11-14 08:53:09 PST Webkit 更新修复，如上面的票证中所述。这距离 OP 发帖仅两个月。

如果您仍然遇到问题，例如 拖放（就像我一样），请查看此错误报告，它仍然有效且未解决：

Bugs.Chromium : Drag and drop performance issue when using "position:relative" style with many cells

自 2014 年 3 月 31 日以来一直处于活动状态

预期的结果是什么？

当拖动对象位于单元格上方时，该单元格应具有红色背景。

会发生什么？

拖放很慢。

单元格有时会显示为红色，但会在几秒钟后显示。

拖动结束后半秒内光标指针不可用。

【参考方案2】：

找到了问题，下面是解决方法。

我们必须从这里启用 chrome 上的“禁用图层压缩”选项 chrome://flags/#disable_layer_squashing

P.S 感谢 @SebastianBochan 和 @HristoValkanov 指导我找到解决方案。

【讨论】：

我认为这不是一个好的解决方案。您不能告诉所有使用 chrome 访问您网站的人在他们的浏览器中启用此标志。

明确一点：Disable_Layer_Quashing 已于 2014 年 4 月 23 日从 Chrome 中禁用并删除（请参阅 codereview.chromium.org/246893017）。这篇文章是5个月后的！这里有一个想法——在尝试花哨的修复之前将您的软件更新到最新版本。

+1 @Gopherkhan 的观点！大多数人会完全害怕你为什么要使用标志来操作（假设临时用户不知道它是什么，而有经验的用户只是不会离开那里）。另外，请不要很快将您的答案标记为解决方案。给别人一个机会，仅仅因为某件事对你有用并不意味着它一定是最好的答案