Javascript works fine but very slowly in IE, why?

Question

Excuse my ignorance for I'm a rookie programmer and my language mistakes for I'm a non native english speaker.

I've got a page that, on some click events triggers some javascript and loads ,via php, content into an iframe which also performs some javascript actions (on itself and on the parent page). Everything works fine on FF and all the features work fine in IE too. But the performance in IE is terribly slow...one of the main features is to change opacity of some pictures on mouse up, and it takes 2s+ for IE to display the new opacity. Why? and more important, what can I do to fix it?

Thanks in advance, Irene

Answer 1

IE has a horribly slow JavaScript engine compared to every other major browser (I'm speaking to IE8 not IE9+)...that's just how it is. You may want to disable certain things in IE, and of course optimize your script overall.

You may for example want to disable the fade in IE, or give it far fewer frames (longer interval in-between steps), because of its DirectX opacity filter, it's much slower than other browsers in most fade situations.

To profile performance problems specific to IE, I highly recommend dynaTrace AJAX edition , it's a free performance profiler made just for IE.

Answer 2

Benchmarks showing how slow things can be in IE: http://www.favbrowser.com/chrome-vs-opera-vs-firefox-vs-internet-explorer-vs-safari/

You might need to experiment with different ways of manipulating the DOM to increase the performance in IE.

Answer 3

IE is known to be a bit slow (sarcasm). I don't know exactly what you are doing, but maybe you might want to remove some effects if the user is using IE? Maybe you are doing a lot of DOM changes.

It would be handy to see the code in order to give you tips on how to get a better performance.

Answer 4

Ok, here you go, this is probably the script that's creating most of the problems...any suggestions?

$(function() {

$("#myTable").draggable({
    containment:'parent',
    drag:function() {
        $("#myTable").css("opacity", "0.6");
        $("#myTable").css("background-image", 'none');
        $("#galframe").css("opacity", "1.0");

    },
    stop:function(){
        $("#myTable").css("opacity", "1.0");
        $("#galframe").css("opacity", "0.6");
        var $image = $("#galframe").contents().find("#jgal div.active img");
                var src=$image[0].src;
                $("#myTable").css("background-image", 'url(' + src + ')');
                $position = $("#myTable").position();
                $("#myTable").css("backgroundPosition", (-parseInt($position.left)+549).toString()+ "px " + (-parseInt($position.top)+20).toString() + "px");
                $("#myTable").css("background-repeat", "no-repeat");
            }
});
});