I am looking for some design “best practice” or heuristic to address performance issues on a webpage.
Basically, there are dropdown menus with up to 10,000 choices and each is in an tag. So I have many thousands of extra nodes in the DOM model. I think this is slowing down the javascripts that parse the document after it loads, but also it is slowing down the initial page load to get out all that data.
I would like to lift those drop downs off the page entirely, so instead of combobox style controls, it will have a link to a modal popup which will contain the picklist. I think preloading and caching these popups on the client will prevent the slowness of loading the initial page, and get all those 10,000s of off the DOM so that the existing script performance will improve.
With my limited experience in web development, I am not sure if the best thing is to create some sort of page/control/service/etc for the initial approach. Once I am confident I am using the correct approach, I should be able to work out the details.
Will the dropdown selections be changing frequently or static? If they’re static, you could maintain the list as an enum in your VB code behind and have the dropdown use the enum as its data source.
If they’re dynamic, I’d explore breaking the list up if at all possible into smaller chunks that could let the user “drill down” from general to more specific items. For example if this dropdown lists types of animals, you might have an initial dropdown subset:
Upon selecting one of the above, say
Mammals, then you’d hit the database for a more specific subset:Finally the most specific subset, if they choose
Apes:If the list cannot be broken down in this way, then I’d try to implement a Google Instant style autocomplete functionality. If you read up on jQuery, there is an autocomplete control which serves this purpose; you should be able to tie that to the database to be able to query as the user types and thereby pare down the results.