Javascript document object is slow in IE

Chris Burkhardt — Wed, 17 Oct 2007 23:09:56 GMT

Accessing properties on the document object is slow in Internet Explorer. I used to use the document object as a place to store globals, ie

function onclick()
{

document.clicks +=1;

}

But this is slow in IE. Instead use:

var clicks;

function onclick()
{

clicks += 1;

}

Here is a full page that demonstrates this idea. I use onmousemove to simplify doing an action over and over, and you can also FEEL how slow it is by moving your mouse around the page.

And the code:

<!DOCTYPE
html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head> <title>Document Object Test</title>
<script type="text/javascript"> var totalObj = new Object(); var flag = false; function loaded()
{ document.onmousemove = useDocument;
} function useDocument()
{ document.total += 5; } function useGlobal()
{ totalObj.total += 5; } function flip()
{ if (flag)
{ document.onmousemove = useDocument;
document.getElementById('styleType').innerHTML = '&nbsp;document
object'; } else {
document.onmousemove = useGlobal;
document.getElementById('styleType').innerHTML = '&nbsp;global object';
} flag = !flag;
} </script> </head> <body onload="loaded();">
<a href="#" onclick="flip();
return false;">Click to flip styles</a><span id="styleType">
document</span> </body> </html>

210 Computing - performance

Javascript document object is slow in IE