JavaScript Optimisation

Started by
16 comments, last by T1Oracle 17 years, 7 months ago
Quote:Original post by BloodWarrior
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


Use a timed creation.. Writing the text to the box at 100ms intervals.

----------------------------

http://djoubert.co.uk
Advertisement
Quote:Original post by dawidjoubert

Use a timed creation.. Writing the text to the box at 100ms intervals.


hm... thats also a good idea... I believe is the closest you can get to multithreading in &#106avascript.
Pain is Inevitable, Suffering is Optional.Unknown
Create all of the elements you might need when the page is first created (onLoad) and then just add them to the appropriate element when the action is invoked that requires dynamically adding elements to the page. The loading will be longer but using the page will be much faster.
Quote:Original post by jregan
Create all of the elements you might need when the page is first created (onLoad) and then just add them to the appropriate element when the action is invoked that requires dynamically adding elements to the page. The loading will be longer but using the page will be much faster.


tried that... but unfortunately clients want both instant download on anything down to a k56 modem AND they want instant processing in the pages.

Ah well, regardless I did manage to find a solution (its above) and it works quite well.
Thanks for all the input.
Pain is Inevitable, Suffering is Optional.Unknown
Quirksmode has a read on the DOM vs. innerHTML discussion. Interestingly enough is how the array works out better overall rather than simply concatenating.
Are you sure you're trying to solve the right problem here? If you're just generating the list of options clientside without having to download anything, the list couldn't be much more than a list of numbers, right? It seems to me that having a combo box filled with hundreds of ordered numerical options is bad UI design in the first place. If you just want to input a number, why not use a text field? Instead of "pick a number from 1 to 1000 from this really huge, slow, and hard-to-navigate combo box", you would have "enter a number from 1 to 1000 in this text box." [smile]

It would be much cleaner, faster, easier for the end user, and it wouldn't require all that messy &#106avascript. I don't think you've mentioned why you're using this approach - is there some reason you have to use combo boxes instead of the simpler and easier option?
1) First, consider what MrAccident said.
2) Second, see what you can do server-side. It makes a lot more sense to do the loop in a server-side application (which only has to produce the actual HTML data, rather than re-render things after each added number), and then send a form to the user with the HTML text all static. The server will likely zip the HTML for transport anyway, so it won't really be that bad for download (it's only a few Kb anyway for 1000 numbers), and then the browser can account for all the numbers at once instead of having to refresh things every time the &#106avascript loop iterates.<br>3) As a last resort, consider anything else that was said here - it's good advice for the problem, but please make sure you address the right problem first.
Quote:Original post by Prozak
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?<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br>It removes white space and shortens variable names. I just found the <a href="http://www.creativyst.com/Prod/3/">tool, check it out.</a>
Programming since 1995.

This topic is closed to new replies.

Advertisement