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:
Mammals
Reptiles
Amphibians
Upon selecting one of the above, say Mammals, then you'd hit the database for a more specific subset:
Apes
Marsupials
Finally the most specific subset, if they choose Apes:
Baboon
Chimpanzee
Human
Orangutan
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.
Related
Sorry in advance if this is not the right place to ask this.
I have a task of making a asp.net site into responsive. The site consists of various ASP.NET controls as well as Telerik ones. The problem is that the designs that i have for the mobile view do not comply with the current structure of site, so in many occasions i have to put the same control twice in the same page, and the hiding/showing depending on the width of the screen.
So i did my research and found that only unique IDs are permitted in same page. Is there any alternative to have the same control twice in same page?
No, there isn't. Controls' IDs must be unique.
Perhaps wrapping them in user control instances and using those a few times over and exposing public properties for what you need is one approach.
Consider using tools like RadPageLayout that help you hide/move unwanted controls/pieces of the page: http://docs.telerik.com/devtools/aspnet-ajax/controls/pagelayout/overview.
Or, create helper methods that get the needed user input/control depending on what is visible or not. These could even be properties in your page that return the currently visible control so you can set properties, data sources, get input, etc. With this you will reference the duplicated controls via this property rather then via their instance ID. Tough to maintain, but without completely redesigning your page and needing duplicates I am not sure there is much else you can do.
I have been asked to design & develop a page in asp.net which contains 7 tabs.Each table contains 2 Editable gridview & clicking on gridview cell should open a popup & that popup will open a new popup ( I would say nested popup). even when i switch from one tab to another. It should hold the griddata & whenever user will finish all the operations he/she will click on save button which will save all the data contained in the tabs.
The page is really too too too heavy. It will definitely take a long time to load as it contains gridview operations , popup related jobs, tab data & tab switching.
I am finding the best way i can achieve this with an acceptable speed of operation. Any suggestions or help would be greatly appreciated.
With all of the web-based controls (tabs, grids, anything that uses an intensive postback model) included in ASP.NET, plus those made by 3rd party vendors (Telerik, Infragistics, and the like), it is possible to make very big web pages. And I've made more than a few in my days. Tabs. Multiple update panels. Drop-downs created from dozens of sources. I have decided to remember one simple fact:
WEB_APPLICATION != CLIENT_SERVER
Just because you can, doesn't mean you should. If changing the UI is not an option, keep in mind the following
Look into paging your grid views. Limiting the amount of data rendered on the page will speed up the page.
You can look at caching operations. If you have access to modern browsers, you can make use of isolated local storage on the client. This will be even faster than caching on the server, but you're limited to the really new stuff.
Become a big friend of partial page loads and AJAX operations. You can still build a bigger UI, but keep the actual data operations small and focused. Data-driven drop downs on a hidden tab can be loaded after the visible components of the page have loaded.
I've made a lot of customers very happy because I keep my UI's incredibly fast, and they never break. I keep them fast by keeping them focused. A page is built for a single task. Design for simplicity into UI. You will not be sorry.
Paging.
Caching.
Lazy Loading (through Ajax).
I am not a ASP.net programmer but I think you need to go back to the basics. I am assuming that gridviews are tables.
You could look into the following basic optimizations:
each of your 7 tabs could be a separate http request, that would cut down your load times by 7 for starters
Possible use a combination of cookies and session objects to hold on to the data in the other 6 tabs.
Also, as #LordCover suggested:
Look into ASP.net caching options if any
Use Ajax where you can (editable table cells)
Also, think in terms of the HTML being generated from the ASP page rather than have a completely ASP centric mindset around this.
Also do not rule out a UI redesign, there are many ways to do the same thing. You may be able to break up the UI into simpler pages
I am using C# and ASP.NET with version 2.0 of the .NET Framework library on this particular project. We are also using the AjaxControlToolkit. The AjaxControlToolkit should have the controls available to make a descent User Interface solution to the problem I'm facing.
I have run into this in a few projects in the last year, and used different solutions in the past. The current design of the project I just picked up, is that there is an <asp:DropDownList> control and on page load a Database call is made to get a list of values. This is then bound using DropDownList's datasource. The problem is that there is 25k items returned from the database. First thing, that's not acceptable for a user to have to scroll through tens of thousands of items. But, even more importantly, is that in every browser that it is tested on (IE 7, FF 3, Safari, and Chrome) the browser completely hangs as it is propagating the dropdownlist items.
What I'm thinking is using a Modal Popup form, which an Autocomplete Extender that allows the user to drill down to a specific company. So, in the field where they have to choose a company, they click on a "select company" icon, the modal form comes up, letting them use the autocomplete extender to select an existing company. They click "Ok" and it save the value to the field.
However, I'm an old school command line/shell/terminal guy, and my ideas of acceptable UI design might be skewed (give me a command prompt on any system, and I'm good to go). I would like the advice of those in the community here as to what they think would be an acceptable solution, or if they have faced other issues like this.
I think your idea for the autocomplete extender is the best solution. I've had this problem as well (sounds similar--a project you are taking over from somebody else). The push-back often comes from the user side. They are used to being able to select from a list of items. Unfortunately as the database grows, this becomes less and less feasible.
But when you have 0.5MB of html downloaded on the page (not including the viewstate), compromises have to be made.
Why do you think you need to create modal popup? Can't you just have the extender on your data entry page?
I had to deal with the same issue. But I ended up using a combobox with paging support and auto complete. Currently this combobox happens to be from Telerik. Its a comboBox for auto complete since you can't type into a droplist.
I agree that no user is going to want to look thru 25,000 items to find the one they want. Is there some way you can limit the data so that they drill down? Like selecting a region or type of company first and then showing the ones that match?
Multiple cascading ListBoxes, each futher refining the resultset of the previous
AJAX AutoCompleteExtender
I have what I imagine to be a pretty standard web-interface.
There are 4 different ListViews (grid controls) which are accessed by a series of Tabs on the top.
I have implemented this as follows:
alt text http://img402.imageshack.us/img402/1530/pagedu8.jpg
Tab 1 will load Page 1 containing Grid 1 into Frame 2, Tab 2 will load Page 2 containing Grid 2 into Frame 2 etc.
However this then means that if you click on an item in the Grid, and I load DetailsPage1.aspx into Frame 2, then Frame 1 and the tabs are still visible and active.
I've been advised that I should just have one Frame, and load the Pages in dynamically based on the tab click, using HttpRequest (or WebRequest in asp.net).
Is this the correct approach to take? If you have any resources or tips at hand, it would be appreciated!
Thanks
Frames are an absolute no-no. There is no benefit to frames that can't be achieved using other techniques.
Does that mean you must use AJAX? Not necessarily. AJAX is a perfectly good solution if you feel the need to provide a rich, seamless interface, but it's not strictly necessary.
You could use server-side includes to separate your tabs into a another (common) sub-page, but since you mention ASP.NET, (assuming you are running on framework v2 or greater) you might want to use Master Pages, where your tabs are in one content section or in the Master itself, and your grids/details are in another content section.
The key difference between the two techniques is that using AJAX, the transition from tab to tab will be slick and seamless, but a) it takes a little extra work (particularly if you are unfamiliar with any give AJAX framework) and b) since you essentially have 4 pages rolled into one, the pages are 'heavier' and are more complex to maintain. If you opt for the non-AJAX route, the key difference is that there will be a small but distinct refresh effect when you click on each tab (since it loads a new page each time).
Of course, Master Pages are useful for maintaining a consistent site style and structure anyway, so there is no reason why you can't use AJAX with a Master Page system.
Frames are lame: you will get problems, if users want to set a bookmark and if users visit your site via google: Then your navigational frame is not visible. So you need a lot of dirty javascript. to check this. If you need javascript, do it right from the start and use AJAX
Ajax is the best pick. But keep in mind to make it browse-able via back/forward. The best pick is to change page hash. I used something like this:
domain.com/#tab1 for first tab
domain.com/#tab2 for second tab
and so on.
If you use jQuery, this can be a good start (i use that and i had NO problem with). I'm sure there is a solution for all popular framework though :)
Instead of using frames, you should just include your navigation page in all of your other pages. The browser will see that you're including the same document in all of your pages and cache it.
Have you tried the TabContainer or loading all 4 detail panes and just showing/hiding panels on tab selection change?
Depending on what screens your users will see, if you load the detail views dynamically (Ajax or postback) you may have trouble persisting any information that the user has entered, and you will incur a wait (users dont like to wait)
I would recommend using jQuery and jQuery UI plugin. No frames will be needed, just div containers.
Like StingyJack, I would suggest having a look at the TabContainer control, but you might want to take care that your ViewState doesn't get too large if you do.
So for example, don't load anything into a GridView until that Tab is being viewed and remove it contents if it is not (saving back to the database of course if required. Using the TabContainer's ActiveTabChanged event would be key to this strategy.You diable ViewState for the grids but leave it on for the container.
You're using ASP.NET, so just load all 4 controls into a mutliview and then on postback set the visible one to be which ever button has been clicked.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.multiview.aspx
DO NOT uses frames (or iframes for that matter) unless you absolutely must...
The only valid reasons I can think of to use (i)frames is file upload controls in fact, and I am not sure it's valid there either...
I've got a web application that I'm trying to optimize. Some of the controls are hidden in dialog-style DIVs. So, I'd like to have them load in via AJAX only when the user wants to see them. This is fine for controls that are mostly literal-based (various menus and widgets), but when I have what I call "dirty" controls - ones that write extensive information to the ViewState, put tons of CSS or script on the page, require lots of references, etc - these are seemingly impossible to move "out of page", especially considering how ASP.NET will react on postback.
I was considering some kind of step where I override Render, find markers for the bits I want to move out and put AJAX placeholders in there, but not only does the server overhead seem extreme, it also feels like a complete hack. Besides, the key element here is the dialog boxes that contain forms with validation controls on them, and I can't imagine how I would move the controls and their required scripts.
In my fevered imagination, I want to do this:
AJAXifier.AJAXify(ctlEditForm);
Sadly, I know this is a dream.
How close can I really get to a quick-and-easy AJAXification without causing too much load on the server?
Check out the RadAjax control from Telerik - it allows you to avoid using UpdatePanels, and limit the amount of info passed back and forth between server and client by declaring direct relationships between calling controls, and controls that should be "Ajaxified" when the calling controls submit postbacks.
I recommend that you walk over to your local book store this weekend, get a cup of coffee and find jQuery in Action by Manning Press. Go ahead and read the first chapter of this 300 page book in the store, then buy it if it resonates with you.
I think you'll be surprized by how easy jQuery lets you perform what your describing here. From ajax calls to the server in the background, to showing and hiding div tags based on the visitor's actions. The amount of code you have to write is super small.
There are a bunch of good JavaScript libraries, this is just one of them that I like, and it really is easy to get started. Start by including a reference to the current jQuery file with a tag and then write a few lines of code to interact with your page.
Step one is to make your "dirty" pieces self contained user controls
Step two is to embed those controls on your consuming page
Step three is to wrap each user control tag in their own Asp:UpdatePanel
Step four is to ensure your control gets the data it needs by having it read from properties which check against the viewstate for pre-existing values. I know this makes your code rely on ugly global variables but it's a fast way to get this done.
Your mileage may vary.