This post was originally published on Coding Glamour.

Ben je op zoek naar gegevens over het IE 6 gebruik in Nederland? Kijk dan bij dit artikel: Gegevens over browser- en OS gebruik in 2010.

Back in the days, tijdens het ontwikkelen van Zoeken op Kaart, hadden we een bijzonder vreemd probleem: Onverklaarbaar CPU gebruik in Internet Explorer 6 en 7. En niet zomaar een procentje of twee, nee op een beetje aftandse computer werd je CPU volledig dichtgetrokken.

Nou is bovenstaande wel voor te stellen wanneer je druk in de weer bent met de kaart, maar dit probleem speelde ook wanneer je je browser geminimaliseerd open had staan. Een losgeslagen Javascript thread? Per ongeluk de hele DOM aan het herschrijven? Nee na een week duizenden regels Javascript, CSS en HTML analyseren, blijkt het een nauwelijks bekende, maar eenvoudig reproduceerbare bug te zijn in IE. Neem het volgende HTML fragment: 

<html>
<head>
    <script src="http://www.funda.nl/js/jquery-1.4.2.min.js"></script>
    <script src="https://www.google.com/jsapi?key=ABQIAAAASJcdVIEH7yWLmVM68YmDiBTSxDmOvtmFUhTR3StE_jolX7JUMxQDdaLSrq_Gx2k4frnNgfv0mwUPGw"></script>
    <style>
        #map { background: url('http://www.funda.nl/img/misc/map-loading.gif') center no-repeat; }
    </style>
</head>
<body>
    <script>
        google.load("maps", "2", { callback: function() {
            var Map = new GMap2(document.getElementById('map'));
            Map.setCenter(new GLatLng(49, 2), 13);
        } });
    </script>
    <div id="map" style="width: 100%; height: 100%;"></div>
</body>
</html>


Nothing fancy. Een eenvoudige implementatie van Google Maps. Laden we deze pagina echter in IE 6, dan zie je het volgende:

http://www.100procentjan.nl/tweakers/strange_cpu_spike.png
Ja, dit is VirtualBox! Het probleem speelt ook op fysieke machines. De 13% CPU is op een quadcore machine (ergo: 50% CPU op 1 core van 2.4 GHz).

Wanneer je in IE een background image gebruikt waar je vervolgens een grafisch heavy layer overheen legt (bijvoorbeeld Maps, maar ook Flash), krijg je bovenstaande behavior! Oplossing? 


    var Map = new GMap2(document.getElementById('map'));
    Map.setCenter(new GLatLng(49, 2), 13);
    $('#map').css({background: ''}); // verwijder loading image na laden


En de CPU utilization is weer normaal!

http://www.100procentjan.nl/tweakers/geen_cpu_spike.png