CODEWITHSUNDEEP
javascriptjqueryhtml
void
void

Reputation: 36703

Performance issues in large jQuery Application

I have a web application which has 8 tabs on the menu. When I click on one tab the current content fades out and the content specific to tab comes up.

This thing is working all fine but the application is pretty slow as the fadeIn and fadeOut is being done on very large html (maybe around ~2000 lines/tab of ) content which is inturn making the whole application slower.

What can I do to make it snappy and smooth.

Here are some doubtful points I have...

  1. Can I load the tab content via AJAX instead of loading all of them in one go?

  2. If I load them via AJAX for ex of Tab A and then user clicks on Tab B, should I remove Tab A content from the DOM and reload it on click of Tab A Again or should I keep it in the DOM.

  3. What will happen to the click handlers as I need to do dynamic event binding in that case.

  4. What else can be done in order to enhance the performance?

Thanks a lot!

Upvotes: 1

Views: 407

Answers (1)

Nalin Aggarwal
Nalin Aggarwal

Reputation: 888

Well, we had that kind a problem, where we have around 10 tabs and need to load data. The doubts you are having is already turned to solution. I ll define wat we have done to accomplish the task with more smooth and perfect result

  1. We are binding the data on tab click using Ajax call, rather than making elements on the runat server. We are binding it on client side Dom manipulation.
  2. If there is a grid, that will have large set of amount, binding data for evey pagination, rather to load whole set of data.
  3. On every tab click data is loading and data on previous tab is cleared. Or into its default position.
  4. If large set if data remain on html, so Dom will Also be heavy and which in turn slower your application. 5.for this task to accomplish you have to create Ajax calls and more Dom.manupulation , which will inturn take more time. So have to decide the path in which direction you want to go.

From my standpoint , there are some observations. I can think if to enhance the performance of the application.

  1. Check if there are any heavy image which will take time to load or slower down you page to compete all loading
  2. Remove the reference of any unused js file or CSS.
  3. User of async and defer with external scripts.
  4. Try not to use more server side element which overhead your page to load, because they gonna bind on server side. Which makes you page heavy.
  5. In some cases compression techniquie is also helpful for me.
  6. Ajax calls and client side manipulation is best, rather to send whole page on server side. !!!

From my experience, these are the things I learned and implement when working with web application to improve the performance of the application.

Upvotes: 1

Related Questions