Question

We are working on a page with multiple tabs which has all static information like labels and textboxes to retrieve registration information. We use Jquery UI Tabs so we have all the tab details as Divs in the same page. My colleague feels that it is difficult to manage the page since it has close to 800 lines of html code. Will it be a performance issue if we split the page into multiple html files and feed the tabs using AJAX?

Thanks in Advance.

Regards,
Raja

Answer 1

1. Load only what you need at the time you need it. If possible, nothing more.
2. Freely use AJAX, but write your AJAX-returning code so that it can be called via AJAX or included by the server, then
3. Return the portion of the page that is visible from the server at first load. At least, return the majority of the page, leaving only lightweight non-crucial aspects to later load with AJAX.

By careful consideration of #2, you will get good initial performance combined with the ability to use AJAX.

Breaking up your main page into separate functional sections is reasonable, if the page is getting so long that it’s hard to maintain. Use server-side includes for this. Note this dovetails in perfectly with #2! How you go about breaking up your code is up to you.

In all cases, try to write reusable components that handle things without lots of repetition of the same code. Use an additional layer of indirection where it makes sense (it doesn’t always).

When it comes to avoiding repetition, not just code but html is also a candidate. If there is some arbitrary structure that is the same around multiple instances of similar elements, perhaps you could move this into a function instead of being embedded over and over again. It might help to stop thinking of the web page as a document and more like an XML data stream that you are writing a program to output. You want to make that program as simple, elegant, maintainable, and sensible as possible.

The next time that you decide to change some repeated html element in your web page, you will thank yourself for having moved the code into a function where you only have to change it in one place.

Practice over time at this style of coding will increase your skill and make it even easier and more automatic next time to write your code this way.