How can I speed up a web page that has server bound controls with a lot of data

I'm working on a page that has several server side dropdown lists, one with 500 items开发者_JAVA技巧. Based on what's selected, I show/hide other page elements during postback (I only bind the data on initial load). The customer opens this page a lot and I don't want them pulling the 500 items down every time they open it. Currently, it takes about 2 to 5 seconds for the page to render. I've started to migrate to a fully javascript/jquery version of the page but want your opinion because I'm not loving the new version.

Is there a way to make this page faster and limit pulling down all 500 items every time?

Note: Some users will want to enter the dental procedure code directly. Others will need to do a look up.

We work on a system where a user's name can be selected from a dropdown list and then user information is displayed below. There are approximately 600 users and one of the stakeholder requirements was that the users had to be selectable in a dropdown list - the stakeholders felt that non-technical users better "understood" how to use a dropdown list.

Our performance for loading the dropdown list is very good. We do the following:

1. Load the page as quickly as possible but DO NOT load the dropdown list
2. On page load, display a loading indicator and then immediately fetch the data for the dropdown list
3. We get the data by calling a webservice using jQuery that returns ONLY usernames and IDs and data is returned in JSON format
4. The query that requests the data is cached on the server for future requests
5. The resulting JSON object is used to populate the dropdown list
6. Hide the loading indicator and you're done

The above occurs extremely quickly and makes for a very pleasant user experience.

If anything, try very hard to do the following:

• Avoid postbacks even if you're using an Update Panel - these will kill performance if you have a large viewstate
• Only return the absolute bare minimum of data that you need to populate the dropdown list
• Don't access any data that isn't immediately necessary. Get the page loaded as quickly as possible and then fetch the remaining information while the user is reading the page

When adding large amounts of data to a page, milliseconds count. Anything you can do to reduce calls for data (and the subsequent adding of that data to the page) will drastically improve the user experience.

It's been a while since I've done asp.net but remember something from the Ajax control toolkit that is like a set of filtering drop downs that group items so you don't have to get the full list.

For example if you're getting a list of all cars, you could have the first drop down as Manufacturer, which when selected activates a second drop down with their range of Models. It limits the ammount of data you have to load at once.

A dropdown list is not a good container for 500 items because the looong list looks ugly and it's hard to locate an item. You can change it to a table-like control(from server view, a gridview or a repeater) with paging function(e.g. display 20 items per page), also you can add some textboxes above the table, users can quickly locate an item by typing some keywords. After that, put the table in a update panel to make the page partially updated when clicking some button.

Anything you can do on the page that doesn't require the entire page to change can be made AJAX-y by enclosing it in an UpdatePanel. UpdatePanels and ScriptManagers allow ASP.NET pages to perform partial postbacks using AJAX, which will speed up anything but a full page reload by drastically reducing the number of data that has to come across.

Other performance tips/tricks:

• If you're using an ORM, or generic queries, to pull in records, try to pull the minimum amount of data you need to show the results. The more data that has to come from the DB and be digested into the viewmodel, the slower the back-end will be.
• Avoid nested MultiViews. Multiviews are great for organizing a lot of data in a "tabbed" fashion, but behind the scenes a MultiView is rendered as a series of divs with CSS to hide/show them. That means that EVERY tab of a MultiView must be rendered on the initial page load. When multiple MultiViews are nested as Views of other MultiViews, the problem is compounded. You can avoid this by using the codebehind to dynamically select and insert the proper control into the page, or by using other code to detect whether the View that this control corresponds to is the currently-selected view, and skip any heavy lifting of data retrieval/processing that would otherwise happen. You may combine either approach with some AJAX components.

I'd start with correctly indexing the database.

One way to speed things up would be to get rid of the postbacks. Showing/hiding page elements is a client-side operation and doesn't require a postback. If you're using jQuery already, you can .show() and .hide() any element on the page.

This doesn't necessarily address the performance of the initial page load, but would improve the performance of the overall user experience when interacting with the page.

For the initial load, perhaps break out various data-bound elements into AJAX calls that happen behind the scenes after the initial page markup loads? I'm kind of shooting in the dark here without knowing a whole lot about the page, but it's worth a try. Maybe load the basic markup without the data in the lists, then on $(document).ready() make an AJAX call to a server-side handler which returns the elements for the first menu. Then, when each menu is selected, fetch the elements for the next menu in the same manner.

The overall load time would be roughly the same (maybe even a fraction of a second longer), but the UI would fully render in the meantime and you'd be using the time the user spends looking at the page and starting to interact with it, a few precious seconds, to load the rest.

Edit: In response to one of your comments above on the question, maybe you can use the jQuery UI Autocomplete to improve the user experience a little? Do the users necessarily want to select the codes from a list, or would it be easier for them to start typing the code and narrow down to the correct one? From a data-entry perspective, avoiding mouse usage is often a good idea.

Using javascript or any of client script is not an solution because the client browser may have javascript disabled...

I would suggest you these opmization,

1. Optimise database query if your table containing 500 records and is not frequently have insert/update operations then create unclustered indexes.

2. Cache the data if not changes frequently.

3. Create stored procedures improves query results because it's being precompiled query and prevents sql injection attacks.