Google Chrome profiler

Help & Support
,
1

I’m always asking ‘how expensive is this’, so maybe it’s time to learn how to use Google Chrome profiler. Below you can see a recording of my project and I like to get some information about how to read this. What is good and what needs to be improved? I have no idea, so I’m glad if someone can help me with this.

image
image1528×736 86.9 KB

image

1 Like
2

read the list of functions from top to bottom, and names that you recognize from our code you can look at optimizing.

Other functions - think about what the name tells you, expand them to see what they do under the hood, and try to guess what’s happening and why - eventually as you keep profiling and looking at code they execute, you start to understand.

3

What is the difference between self-time and total-time?

It looks like ‘Animation frame fired’ need to be improved, but what is this exactly? Or isn’t 8806.7 ms bad?

image
image692×345 23.6 KB

4

Chat GPT knows this well:

What is the difference between self-time and total-time?

ChatGPT said:

ChatGPT

Self-time and total-time are metrics often used in performance profiling to analyze the time spent in functions or code blocks during execution. Here’s what each term means:

1. Self-Time

  • Definition: The time spent exclusively within the code of the function itself, excluding the time spent in any functions or methods it calls.
  • Usage: Indicates how computationally expensive a function’s internal operations are, without accounting for external dependencies or subroutine calls.
  • Example:

python

Copy code

def foo():
    for i in range(1000):
        pass  # Loop operation is internal to `foo`

def bar():
    foo()  # Calls `foo`
  • Self-time for foo: Time spent executing the for loop.
  • Self-time for bar: Minimal, as it mainly delegates work to foo.

2. Total-Time

  • Definition: The cumulative time spent in the function itself and in all functions or methods it calls.
  • Usage: Reflects the overall time impact of a function, including its dependencies and the subroutine calls.
  • Example:
    • Total-time for foo: Same as its self-time, as it doesn’t call other functions.
    • Total-time for bar: Includes the self-time of foo (and any other functions bar might call).

Key Differences:

Aspect Self-Time Total-Time
Scope Excludes time in subcalls Includes time in subcalls
Focus Highlights function’s internal efficiency Highlights the function’s overall impact
Interpretation Helps isolate bottlenecks within a function Helps evaluate how a function contributes to program runtime

Use Case in Optimization:

  • Focus on Self-Time if a function’s internal operations are inefficient.
  • Focus on Total-Time to understand how a function’s dependencies impact performance.
2 Likes
5

Animation frame is the callback from the browser, and within this the whole frame takes place … script updates, engine rendering, all of it. Dig deeper to see what it does inside.

1 Like