0

I'm using the highcharts plugin to present some graphs. Analyzing compatibility with IE10 (/IE9) I'm facing a serious performance issue.

My analysis is with Windows 10, using IE11 in compatibility mode set to IE10 (or IE9, same problem). It might be that it is caused by the combination of using compatibility mode + windows 10. I just want to know if it is the same problem, when users are using plain IE10 or IE9 (not in compability mode). I've tested it on several machines. I'm facing the same problem as the link below (deployed), while running the code locally on a virtual machine.

I've stripped it down as much as I could. The situation: having a set of X div-containers, attaching a highchart to each of them. In this case 15 charts. The issue: the runtime per graph increases over time, and thus increasing the total runtime dramatically!

Example: [link to example page]. I've created a simple html page, with 15 div containers, and a button. OnClick of the button only triggers adding a highchart to each of the div-containers, while tracking the runtime per div-container. Additionaly tracking the total runtime. All tracked runtimes are printed. While loading the page the click on the button is triggered as well, using jquery ( $('#btn').trigger("click");)

I also put exact the same code in a JS fiddle example. I can't reproduce the same problem using compatibility mode.

Can somebody help me out? What might be causing this performance leak? Is it just a problem with the compatibility mode, or will it be this bad in IE10 / IE9 as well?

Issue example: running it in Chrome, FireFox or IE11, it runs smoothly taking about 0.2 to 0.4 seconds. While running it in IE in compatibilty mode set to IE10 or IE9 (using Windows 10), it initially is pretty fast while loading the page the first time; around 0.6 seconds (see below). Note that each graph takes about the same amount of time. After doing a redraw using the button, there starts building up a performance lag, taking total time up to 15 to 20 seconds (up to more than 2sec per graph). Each graph takes more time. Every time the button is pressed, the performance gets worse.

Intial load in compatibility set to 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

Example first button click:

[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
FBE
  • 631
  • 2
  • 8
  • 15

1 Answers1

1

Running you web site with open developer tools on IE11 increases renering time more than twice. You should check IE10 and IE9 instead of emulating via IE11.

I have just tested IE10 / Win7 - each redraw takes about 500ms.

In IE9 / Win7 - your page doesn't work and neither does the JSFiddle demo. Place you JS code in $(function(){ <here> }) - https://jsfiddle.net/9dozuour/8/

This demo runs in IE9 and each redraw is done in about 900ms.

Kacper Madej
  • 7,566
  • 19
  • 32
  • Great! I was already guessing, or at least hoping, that it was caused by rendering it in IE11 in emulation mode. Thanks for your effort! Question: about putting the code inside a JQuery function; do you expect it will work when this kind of code (triggering Highcharts) will work well placed inside regular javascript functions? (of course this was just an extracted example) – FBE Oct 04 '16 at 07:41
  • @FBE You should make sure that DOM is loaded. If you do not want to use jQuery, then you could load JS files first and then JS code - that should do it. [Another option is to use document ready equivalent without jquery.](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) – Kacper Madej Oct 06 '16 at 23:27