Javascript Performance - Chrome Dev tools

[christinach]

What maintenance needs to be done?

Check the Javascript Performance using the Chrome Dev tools

• Use the Chrome Task Manager tool to see if there is a potential JS memory leak.
  In chrome Settings -> More tools -> Task Manager. Right click on the columns header and select Javascript Memory. The Javascript Memory column is a first indicator if there is a memory leak.
• Is the JS memory increasing? If yes then:
• Use the Memory tab -> Select a Profiling type:
  1. Select Heap snapshot and record a heap snapshot. Results at the time the heap snapshot was taken:
  - a.(column) Shallow size is the size of the object itself.
  - b.(column) Retained size is the size that would be freed from the memory if that object (and the objects it references) would be deleted.
  4. Select Allocation instrumentation on timeline and start a profiling session. In the results of this profiling you can select a small time frame and look at the snapshot of the specific time frame. (Think of this profiling as a combination of a Heap snapshot and an allocation Sampling)
  5. Select Allocation sampling and record a profile as you interact with the page. This shows the amount of heap memory that is allocated by each function including the allocations that were subsequently freed. - Use the Performance tab to record a memory screenshot
• Click on Performance Tab -> Record a session. Look at the graphs at the bottom. Does the JS Heap graph keeps increasing ? If yes then there is a possible JS memory leak and GC might not be able to clear it.

Acceptance Criteria

• Document your findings on this ticket .
• (Optional) If you are able to identify possible areas in the code that create Javascript memory leak then create new tickets and include your findings from this ticket.
• (Optional) Document potential code improvements.

Notes

Load the application in your dev environment and load the non-minified Javascript so that you can see which object allocates what.

References

Memory Panel overview