javascript - Highcharts 在兼容模式下性能落后于 IE10(及更低版本)

标签 javascript jquery internet-explorer highcharts

我正在使用 highcharts 插件来展示一些图表。在分析与 IE10 (/IE9) 的兼容性时,我面临着严重的性能问题。

我的分析是使用Windows 10,在兼容模式设置为IE10(或IE9,同样的问题)下使用IE11。可能是使用兼容模式+Windows 10的组合引起的。我只是想知道当用户使用普通的IE10或IE9(不是兼容模式)时是否是同样的问题。我已经在几台机器上测试过了。在虚拟机上本地运行代码时,我遇到了与下面的链接(已部署)相同的问题。

我已经尽可能地把它剥离了。 情况:有一组 X div 容器,每个容器都附加一个 Highcharts 。在本例中为 15 个图表。 问题:每个图表的运行时间随着时间的推移而增加,从而显着增加总运行时间!

示例: [link to example page] 。我创建了一个简单的 html 页面,其中包含 15 个 div 容器和一个按钮。按钮的 OnClick 仅触发向每个 div 容器添加 highchart,同时跟踪每个 div 容器的运行时间。另外跟踪总运行时间。打印所有跟踪的运行时间。加载页面时,也会使用 jquery 触发按钮的点击 ( $('#btn').trigger("click");)

我还在 JS fiddle 中放入了完全相同的代码例子。我无法使用兼容模式重现相同的问题。

有人可以帮我吗?是什么可能导致这种性能泄漏?这只是兼容模式的问题,还是IE10/IE9也会这么糟糕?

<小时/>

问题示例:在Chrome、FireFox或IE11中运行,运行流畅,大约需要0.2到0.4秒。当在 IE 中以兼容模式设置为 IE10 或 IE9(使用 Windows 10)运行它时,第一次加载页面时最初速度相当快;大约 0.6 秒(见下文)。请注意,每个图表花费的时间大约相同。使用按钮进行重绘后,性能开始出现滞后,总时间长达 15 到 20 秒(每个图表最多超过 2 秒)。每个图表都需要更多时间。每次按下按钮,性能都会变差。

兼容性设置为 IE10 时的初始加载:

[DrawGraph 0] Execution time: 79
[DrawGraph 1] Execution time: 47
[DrawGraph 2] Execution time: 43
[DrawGraph 3] Execution time: 40
[DrawGraph 4] Execution time: 41
[DrawGraph 5] Execution time: 39
[DrawGraph 6] Execution time: 40
[DrawGraph 7] Execution time: 42
[DrawGraph 8] Execution time: 40
[DrawGraph 9] Execution time: 39
[DrawGraph 10] Execution time: 41
[DrawGraph 11] Execution time: 37
[DrawGraph 12] Execution time: 37
[DrawGraph 13] Execution time: 39
[DrawGraph 14] Execution time: 42
[DrawAllGraphs] Execution time: 654

第一个按钮单击示例:

[DrawGraph 0] Execution time: 321
[DrawGraph 1] Execution time: 474
[DrawGraph 2] Execution time: 541
[DrawGraph 3] Execution time: 758
[DrawGraph 4] Execution time: 926
[DrawGraph 5] Execution time: 1001
[DrawGraph 6] Execution time: 1374
[DrawGraph 7] Execution time: 1384
[DrawGraph 8] Execution time: 1548
[DrawGraph 9] Execution time: 1687
[DrawGraph 10] Execution time: 1857
[DrawGraph 11] Execution time: 2010
[DrawGraph 12] Execution time: 2184
[DrawGraph 13] Execution time: 2275
[DrawGraph 14] Execution time: 2532
[DrawAllGraphs] Execution time: 20896

最佳答案

在 IE11 上使用开放的开发人员工具运行您的网站会使重新生成时间增加两倍以上。您应该检查 IE10 和 IE9,而不是通过 IE11 进行模拟。

我刚刚测试了 IE10/Win7 - 每次重绘大约需要 500ms。

在 IE9/Win7 中 - 您的页面无法工作,JSFiddle 演示也无法工作。将你的JS代码放在$(function(){ <here> })中-https://jsfiddle.net/9dozuour/8/

该演示在 IE9 中运行,每次重绘大约在 900 毫秒内完成。

关于javascript - Highcharts 在兼容模式下性能落后于 IE10(及更低版本),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39660324/

相关文章:

javascript - 用 Redux 更新整个状态的方法是什么?

javascript - 将 JavaScript 对象传递给 PHP 不起作用

windows - 测试 IE 和其他 Windows 浏览器的公认方法是什么?

jquery - 下拉框出现在屏幕外

javascript - bxslider 在鼠标悬停时停止自定义分页

java - 数据表中生成的标记

css - IE11 没有将我的盒子定位在正确的位置。解决方法?

javascript - 如何将整个表单作为字符串获取

javascript - 在 JavaScript 中计算总数的分组对象数组内的对象数组

jquery - 不能将两个 div 并排放置