profiling the frontend

the need for speed

Created by Alok Rao / @arca1n

Why Optimize?

Because faster is better.

Profiling 101

• Sampler Profiler
• Instrumented Profiler

A good resource to learn more about Chrome profiler.

Sampler Profiler

• Provides approximate time taken
• Less browser overhead
• Requires no code change
• Sample interval in Chrome Tools is 1ms

Instrumented Profiler

• Provides exact time taken
• High browser overhead
• Requires code changes

  //Instrumentation Code
  console.time("Label goes here");
  functionBeingInstrumented(yada, yadaa);
  console.timeEnd("Label goes here");

The "other" tools

• chrome://memory-redirect/
• chrome://gpu
• chrome://tracing

Instrumented code time shows up in chrome://tracing

The magic number 60fps

60fps === 16.6666666667 ms/frame

function bar() {
    // Do something
}

function foo() {
    // Do something
    bar();
    return true;
}

function renderFrame() {
    foo();
}

Demo Time

So which one should you use?

• Use the Sampler first
• Narrow down slower code paths
• Use instrumented profiler on slower code paths

Don't forget to comment out instrumentation code before QA runs the code on non-chrome browsers.

THE END

BY Alok Rao et al.