Heyas I have an html application that generates some elements on the fly. For example a combobox is created with document.createElement(); and then populated. My problem is that on some pages I have about 4-5 comboboxes each with hundres of elements which take forever to load. Does anyone know of a way to speed up &#106avascript? some kind of precompile or anything else that allows the browser to process its code a lot faster. Most of it is inside a loop so it should be fairly easy to optimise. If anyone knows any particularly slow operations in &#106avascript I would also appreciate some help here. ------------- EDIT: It seems I didnt made myself clear. Im not complaining about download times but actually about processing times. Here is a small example <pre> &lt;html&gt; &lt;script&gt; function doScript() { var newCombo = document.createElement("&lt;select&gt;"); for(var i=0;i&lt;1000;i++) { var newElement = document.createElement("&lt;option&gt;"); newElement.value = "i"; newElement.innerText = "this is "+i+" option"; newCombo.appendChild(newElement); } document.body.appendChild(newCombo); } &lt;/script&gt; &lt;body&gt; &lt;input type="button" &#111;nclick="doScript()" value="click me"&gt; &lt;/body&gt; &lt;/html&gt;</pre> This is a very very simple example but even then when you click &#111;n the button there is a slight delay &#111;n my machine. This is a fairly decent work machine so I can understand when clients complain that in their machines the code is too slow. Plus the original code get strings here and there and changes &#115;tyles etc etc. So, does anyone know of a way to optimise &#106avascript? ------------- Yours Truly K <!--EDIT--><span class=editedby><!--/EDIT-->[Edited by - BloodWarrior on September 7, 2006 7:33:13 AM]<!--EDIT--></span><!--/EDIT-->

It seems like you have a lot of static data on the page.

Have you tried Ajax, so that you can reduce the weight of the page, and only work on data that is relevant to the current job being performed?

One fun way to optimize js is to remove whitespace and reduce the lenght of variable names - there's nothing like reading scripts optimized in that way ;). A syntax highlighting script I downloaded some time ago had two different versions - one normal and one without extra formatting (making it just a blob of characters). (I'm only partially serious here - it's to be concidered as a LAST resort)

[Edited by - e-u-l-o-g-y on September 7, 2006 6:21:56 AM]

There is a free &#106avascript app online that can compress &#106avascript code for you. I forgot what the url is but I'm sure googling &#106avascript compression or a variation of that can find it. Good luck.

Quote:Original post by T1Oracle
There is a free &#106avascript app online that can compress &#106avascript code for you...<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--> By compress do you mean white-space removal, or does it actually compress the text in the page?<br><br>

ops!
Guess I didnt make myself clear...

when I meant that it took forever to load I meant the dynamic building of the combobox took forever to execute. I didnt meant that the page was downloading stuff.

Imagine that you have a page with a button. Clicking on it will trigger a script that creates and displays a combobox. However the combobox has 1000 items that are all created dynamically and so the time it takes to create this is quite long.

I will update the first post to add an example soon.

Yours Truly
K

It doesn't seem like an optimal solution to append all those elements.. perhaps you should look into another solution? Perhaps php is a better option or ajax like Prozak mentioned.

Quote:Original post by e-u-l-o-g-y
It doesn't seem like an optimal solution to append all those elements.. perhaps you should look into another solution? Perhaps php is a better option or ajax like Prozak mentioned.

yeah... but ajax only allows me to retrieve information at runtime and as for php it requires that my code is held in a php enabled server.
Plus php building the page would mean that it would download the page completed (huge page then) although I could minimise it by using ajax to download only the parts that I needed when I needed them.

No... my current solution means that my pages are really small since they are a bunch of &#106avascript data and fixed &#106avascript builders. They work really really well except when I hit a page that has so much data that it takes a long time processing... and its really processing time.<br>Maybe I should get/build a &#106avascript profiler to see exactly who is messing about with my performance and then try to dump the culprit.<br><br>oh.. wait... that comment about append... It just gave me an idea... I guess I could try to &#111;nly append &#111;nce by concatenating the strings for each option. Although I suspect concatenation is a slow process in &#106avascript just as it is in any other language.

Quote:Original post by markr
You may find that creating a long string with some HTML in, then setting the property "innerHTML" on an existing element, is a lot quicker than creating all the DOM nodes manually (the DOM nodes may not appear instantaneously afterwards, but will be there soon).

This method works in IE, Mozilla, Opera and others. It's not an "official" W3C method however.

There may be another way of creating options for a select... maybe you can create a new option using the &#106avascript constructor "Option" ... I think that is standard (better look that up though).

Seriously, the innerHTML method is evil, but works pretty well.

Mark

All Hail to thee Mark
check this sample. Button 1 is the correct way of doing it, button 2 is the best way but it doenst seem to work with select. Button 3 is the logical alternative to button 2 but it slows down the bigger the body becomes (click a few times and notice those times increasing). Button 4 is the best solution.

Thanks, i go on and review all of my code.
Yours Truly
K

<html><script>function doScript1()	{var start = new Date().getTime();	var newCombo = document.createElement("<select>");	for(var i=0;i<1000;i++)		{		var newElement = document.createElement("<option>");		newElement.value = "i";		newElement.innerText = "this is "+i+" option";		newCombo.appendChild(newElement);		}	document.body.appendChild(newCombo);var end = new Date().getTime();var time = document.createElement("");time.innerText="Type 1="+(end-start);document.body.appendChild(time);	}function doScript2()	{var start = new Date().getTime();	var result ="";	for(var i=0;i<1000;i++)		{		result += "<OPTION value="+i+">this is "+i+" option numver</OPTION>";		}	var newCombo = document.createElement("<Select>"+result+"</select>");	document.body.appendChild(newCombo);var end = new Date().getTime();var time = document.createElement("");time.innerText="Type 2="+(end-start);document.body.appendChild(time);	}function doScript3()	{var start = new Date().getTime();	var result ="";	for(var i=0;i<1000;i++)		{		result += "<OPTION value="+i+">this is "+i+" option numver</OPTION>";		}	document.body.innerHTML=document.body.innerHTML+"<Select>"+result+"</select>";var end = new Date().getTime();var time = document.createElement("");time.innerText="Type 3="+(end-start);document.body.appendChild(time);	}function doScript4()	{var start = new Date().getTime();	var result ="";	for(var i=0;i<1000;i++)		{		result += "<OPTION value="+i+">this is "+i+" option numver</OPTION>";		}	var newCombo = document.createElement("");	newCombo.innerHTML="<Select>"+result+"</select>";	document.body.appendChild(newCombo);var end = new Date().getTime();var time = document.createElement("");time.innerText="Type 4="+(end-start);document.body.appendChild(time);	}</script><body><input type="button" onclick="doScript1()" value="click me1"><input type="button" onclick="doScript2()" value="click me2"><input type="button" onclick="doScript3()" value="click me3"><input type="button" onclick="doScript4()" value="click me4"></body></html>