5

I've made a game on pixi.js where it is very simple and should run smoothly but doesn't. Since the game is big and has lots of elements I don't know where the bottleneck is. I believe some part/s of the is buggy resulting in lots of resource usage.

I want to learn the method on how to identify the functions I wrote that use up a lot of resources.

When I use default chrome tools they never show the part of the code that I wrote but always the library ticker: https://prnt.sc/qiplql.

This doesn't help me, I want to know which functions I wrote that is being called many times and uses up a lot of resources.

What is a way I can do this?

Here is our debugging server where the code isn't minimized.

demiculus
  • 1,243
  • 1
  • 12
  • 32

1 Answers1

7

Zoom in

To get the most out of the performance monitor you must zoom into the timeline and investigate small sections of code.

The image below shows the section of the timeline, and the Call tree's representation of that small section of time

Call tree shows selected time

Find a single frame

However this still is too much information. Zoom right in to find a single frame that is running long (over 16ms)

Use the graphical call tree (open fold main)

The next image shows a long frame (25ms) Opening the fold main (on left) will show a graphical representation of the call tree.

The frame is started with a long task triggered by a mouse up event. At the bottom of that stack the reason the event takes so long is the DOM recalculating the style.

The recalculation of the style meant that the next requestAnimationFrame callback had some extra baggage before (reflow) and after the script (DOM rendering and compositing) meaning the frame was late to present.

Open tab main and zoom in on requestAnimationFrame

Zooming in on the requestAnimationFrame there are no problems. Just as an example I zoomed so you can see how the graphical representation relates to the Call tree. I have drawn some lines connecting graphical function calls with the same call in the call tree.

Many reasons

To find your bottle necks you will have to zoom right in on the slow frames. There may be many different reasons that frames are slow.

Community
  • 1
  • 1
Blindman67
  • 51,134
  • 11
  • 73
  • 136
  • I'm trying to find those reasons. With this method I'm mostly able to see library or other functions that take up space. But I'm not able to debug my code. It almost shows none of my code. Maybe because I don't understand how it works. Ex: https://prnt.sc/qnuert here is animation frame fired. The pink ones are my code. When I zoom in its like this: https://prnt.sc/qnufyk Are all of those purple code run because of my cardAnimation functions or are they separate? How can I know what all these functions are doing & decrease them: https://prnt.sc/qnugmc – demiculus Jan 15 '20 at 04:49