Wednesday, October 17, 2007
« Leaving Firefox | Main | Unacceptable Microsoft: search.live.com ... »
Javascript document object is slow in IE
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>

javascript | js | performance
Posted By: Chris Burkhardt on October 17, 2007  #    Disclaimer  |  Comments [0]  |  Related posts:
Comments are closed.