Under What Circumstances Would Javascript Performance be Worse in IE8 than IE7?

11
votes

I work for a company that built interactive seating charts using Javascript. Here's an example: http://seatgeek.com/event/show/457624/miami-dolphins-at-new-york-jets-2010-12-12/. In many ways they mimic the functionality of Google Maps.

We're dealing with an odd problem--performance for the maps is fine in all browsers except IE8. I'm including IE6 and IE7 in the "all browsers" category. We're seeing markedly worse JS performance in IE8. When you try to drag the map in IE8, it locks up a bit and there's a noticeable lag. But that's not a problem in IE6 or IE7.

We've isolated that the problem is related to the markers on the map. It's much more prevalent when you zoom in and there are more markers displayed.

We've done some benchmarking using dynaTrace and it seems the delay is not caused by JS processing, per se, but rather by what dynaTrace refers to as "rendering". Seems surprising that the newer version of IE would have worse rendering.

2
javascriptinternet-explorerbrowserinternet-explorer-8internet-explorer-7
What image types are you using? – Slappy
@Crescent it's using EmulateIE8. @Slappy we're using PNGs. – Jack7890
IE8 renders PNGs differently. Try replacing them with a stub gif image and see what happens. Also, your site is super slow: images do not get pre-loaded and there is a ton of them. This type of rendering could easily be done by raphaeljs without using any images – glebm
Also, you totally screwed up the compression: you don't need the alpha channel and using a palette is a ton better in your case (fileformat.info/user/anonymous/download/…) – glebm
@glebm you should submit those as the answer so it can be voted on – jcolebrand

2 Answers

1
votes

Have you run the script Profiler in the IE8 Developer Tools? It will tell you exactly how much time is spent on each function.

See: Link

0
votes

IE8 renders PNGs differently. Try replacing them with a stub gif image and see what happens. Also, your site is super slow: images do not get pre-loaded and there is a ton of them. This type of rendering could easily be done by raphaeljs without using any images (the originals are probably vectors -- export them as paths and render with raphael).

Also, you totally screwed up the compression: you don't need the alpha channel and using a palette is a ton better in your case.