dotnet jscript: Wim Apr 27, 1:27 am show options

Newsgroups: microsoft.public.dotnet.framework.aspnet
From: "Wim" <wimverl...@gmail.com> - Find messages by this author
Date: 27 Apr 2005 01:27:26 -0700
Local: Wed,Apr 27 2005 1:27 am
Subject: Performance issue when dynamically populating a dropdownlist
from a hidden frame
Reply | Reply to Author | Forward | Print | Individual Message | Show
original | Remove | Report Abuse

Hi Everyone,


I'm trying to speed up a Asp.net 1.1 applications' performance. The
application needs to run in an environment with little bandwith and
therefore pagesizes and roundtrip times shoud be brought back to a
minimum.


The application suffered from relatively large screens. A typical aspx
page was 500 Kbyte so page load times were in the order of 40 - 50
seconds. After unsufficient loading improvement using .net caching
techniques like outputcaching and partial caching (location=3DClient), I
went on the track of local (client-side) caching using hidden frames. I

furthermore changed the navigation (dropdown menu) to load the
userpages in another frame and added javascript to load the data from
the hidden frames into the controls. So far, a pretty standard
approach.


Some details of the pages and the loading techniques:
The data in the hidden frames is stored in javascript arrays (generated

on the server) and only needs to be posted once. The page loaded in the

hidden frame containing the data is about 200 KBytes. But the userpages

decreased about 70% or more in size!!!
To load the data into the dropdownlists I issue a client-side
parents.myframe.location=3D"page=ADtoload.aspx" when the user selects
"page
to load" from the menu. In "pagetoload.aspx" I stated an
onload=3D"LoadControls()" in the form tag to populate the controls
automatically.


I hope somebody is still with me :-)


After several different approaches however, I cannot get the javascript

which loads the data to perform under 15 seconds, and of course I would

like to bring it back to 1 or 2 seconds.
The pages contain about 16 dropdownlists and some textboxes. Each
dropdownlist gets loaded with approximately 500 options, so we are
facing a load of about 8,000 options.


This brings me to my question: is the dynamic loading of dropdownlist
options in javascript given the number of options reasonable or can it
be done in much less time?
The way I add the options is pretty standard:


var Option
var Text
var Value
for (var i=3D0;i < parent.hiddenframe.arraywithte=ADxt.length; i++)
{
Text =3D parent.hiddenframe.arraywithte=ADxt[i]
Value =3D parent.hiddenframe.arraywithva=ADlue[i]
Option =3D new Option(Text, Value)

parent.userframe.forms("Loaded=ADPage").items("dropdownlist").A=ADdd(Option)

}


Is there a way to speed things up? I tried to disable the dropdownlist
while loading but that does not deliver too much improvement, if any at

all...=20

Thanks a lot for reading, hope somebody has an idea!=20
Wim

W> The way I add the options is pretty standard:
W> var Option
W> var Text
W> var Value
W> for (var i=0;i < parent.hiddenframe.arraywithte­xt.length; i++)
W> {
W> Text = parent.hiddenframe.arraywithte­xt[i]
W> Value = parent.hiddenframe.arraywithva­lue[i]
W> Option = new Option(Text, Value)
W> parent.userframe.forms("Loaded­Page").items("dropdownlist").A­dd(Opti
W> on)
W>
W> }
W>
W> Is there a way to speed things up? I tried to disable the
W> dropdownlist while loading but that does not deliver too much
W> improvement, if any at

Just a few guesses …

First, you may try to load the list by generating HTML code for it as a string
and assigning it to its container's innerHTML. In this case all the items
will be added in a batch, no UI / state update between adding each two items,
and so on. If loading of the same page worked pretty fast in the no-JS case,
this is likely to help, IMHO.

Second, adding of items may be made asynchronously. You add a few items,
call the same function using setTimeout so that it added some more items
and called itself, and so on. Using zero timeout for the setTimeout function
would cause the browser to update user interface, react to user input (that
is, not be hung up) and then execute the callee immediately.

(H) Serge

Hi Serge,

Thank you so much for these options. I will get right to testing them.
The second one is most interesting given the number of dropdown lists
and options!

Again thank you very much!
Wim

W> Thank you so much for these options. I will get right to testing
W> them. The second one is most interesting given the number of dropdown
W> lists and options!

Good luck!

As for me, I would try combining them — apply HTML text to one box and then
schedulle execution for the next one — regarding the fact that in the statically-loaded
version the performance was much better. The latter fact makes me suspect
that the very dynamic adding of the items is way too sloooow, so HTML text
loading could be faster. And, of course, let the browser update and interact
with user in between.

(H) Serge

Hi Serge,

It all works fine now, I load all the options within half a second or
so. I pre-load the dropdownlists as dropdownlists in the hidden frame
instead of the javascript arrays or something else. Then I assign the
outerHTML property of the loaded dropdownlist to the innerHTML of a DIV
on the userpage. Hereby solving the performance problem. Next step: how
to work correctly with postbacks....

Thank you very much for your help!
Best regards,
Wim

Hello,

What browsers is it compatible with? I fear outerHTML is quite nonstandard,
no?

(H) Serge

It's probably some DHTML thing. I will test it with Firefox and Opera,
I was only hired to deal with the problem in an IE environment... Keep
you posted.

Wim