We have a grid spanning 126 rows and 11 columns. The grid is editable with roughly a thousand textboxes ( I understand bad design, but seriously the client is adamant).
So on these text boxes we call jQuery custom function to calculate sum and multiplication across the length and breadth of the grid.
The custom method is applied to two or three rows in groups to give subtotals and totals.
Because of the huge amount of generated script the page has slowed down drastically.Drastically, means when I enter any number in textbox it takes atleast 2 seconds to respond back and populate the results in designated textboxes.
We are using .live() method as the grid is inside Updatepanel.
Any help in optimizing the horrible performance is much needed and will be Highly appreciated.
First, everything below is a guess. Have you profiled the page to see where the bottlenecks lie? Is there a public URL where we can see this in action?
A minor improvement can probably be had by switching to
.delegate()or.on()for attaching events. Attach the event as close as posible to the grid. I doubt that will help a lot though.Basically it sounds like you’re trying to implement a spreadsheet, so I would advise the same techniques a spreadsheet uses. Use a dependency graph to determine what really needs to be recalculated when a cell changes. Store intermediate results of things that don’t change very often. Rather than attempting to recalculate everything at once, use a setTimeout to calculate a few rows of the grid at a time.