I have a process that updates hundreds of rows in a grid via jQuery. It takes too long so I am trying to figure out where the bottleneck is first so I can work there. I tried Chrome's profiling tool, but having a hard time understanding it (see screenshot). How do I figure out which is the problem since self and total completely different?
Asked
Active
Viewed 282 times
1
-
We need to see how you are doing it with code. Doing everything row by row and updating the DOM 100's of times is bad. – epascarello Mar 30 '12 at 19:29
-
My initial problem is I don't know where the bottleneck is to give the code. There are thousands of lines of code so I am hoping for some help in how to figure out what area to get the snippet from. – TruMan1 Mar 30 '12 at 19:35
2 Answers
2
self is how much time was spent doing work directly in that function.
total is how much time was spent in that function, and in the functions it called.
Etienne Dupuis
- 13,548
- 6
- 47
- 58
-
2http://stackoverflow.com/questions/7127671/difference-between-self-and-total-in-chrome-cpu-profile-of-js – Etienne Dupuis Mar 30 '12 at 19:30
2
The bottleneck here is almost guaranteed to be the DOM (methods internal to the browser), not any specific JS code.
If you're displaying enough data that updating it locks the browser for several seconds, you should really consider going with a virtual scrolling grid instead. My favorite is SlickGrid.
Instead of just rendering out a giant table, you store your dataset in much more lightweight in-memory JS objects. (Which, consequently, can be modified and sorted an order of a magnitude faster than the DOM-based updates you're currently doing.) SlickGrid only renders DOM elements for the portion of the table you are viewing, so there's much less strain on the browser.
You can also opt to load small chunks of your dataset at a time (the backend is implemented as simple pagination), giving you the ability to display effectively infinite rows in the browser with constant performance.
josh3736
- 139,160
- 33
- 216
- 263