HTML performance (Asp.Net)

Question

I have a large HTML file (In ASP.NET) that has several smaller ... tags to control content based on users at the company I work for. In my current setup I load the entire page, but many of the panels are hidden until the user clicks on a link.button and then I have some JQuery that displays or hides it.

The site seems fine in reference to performance, but as other departments add content, I worry about the HTML file itself growing to large. Is there a best practice to this? Almost all of the hidden panels are available to each user, its just a matter if they click not he link to show it. Beloe are a few ideas thats crossed my mind and would love some feedback from you experts out there.

1.) Should I store this type of content in a DB and have it retrieved every time a user click on the link (This seems like it would be easier to read/maintain code wise, but I worry about performance)

2.) Should I have each separate ... content loaded in a separate html file and loaded via java-script.

3.) Keep what I have?

Thanks again for your ideas. Jonathan

Answer 1

A few thoughts come to mind. Does all the information need to be on the same page? If you can break the content up into multiple pages, I'd suggest you start there.

Assuming you need to keep everything on one page, I agree with rick regarding a lazy-loading approach. Your HTML output will be just a DIV, and some jQuery to download and populate the content via AJAX. You might have that content download when the user clicks to see the hidden content, or just have the hidden content download in the background on page load. Either way will yield performance improvements.

The decision to store the content in a DB vs. separate HTML files is separate from the performance issue. The database will likely not be your bottleneck, but of course I'm just guessing here not knowing much about your application. Use the DB if it is more convenient, leads to a more stable architecture, etc. But in my opinion it's not a necessity here.

Answer 2

If the child content divs/html/controls are small, I recommend lazy loading them with jQuery and AJAX.