Profiling

The main purpose of profiling is to understand why a user experience was slow. It's best to profile all the events in your app that could be slow.

Profiling Basics

Palette provides an event listener API that starts the profiler on certain events and stops it when the page is idle.

Here is an example of profiling Keydown to Paint and Click to Paint events:

profiler.on(["paint.keydown", "paint.click"], {
  sampleInterval: 1_000,
  maxBufferSize: 100_000,
});
profiler.off();

Best Practices

We recommended profiling on these events:

profiler.on(
  ["paint.click", "paint.keydown", "paint.scroll", "paint.mousemove", "markers.measure", "events.load", "events.dcl"],
  {
    sampleInterval: 1,
    maxBufferSize: 100_000,
  }
);

Here are all the supported events:

• "paint.click" - Click to Paint
• "paint.keydown" - Keydown to Paint
• "paint.scroll" - Scroll to Paint
• "paint.mousemove" - Mousemove to Paint
• "markers.measure" - Measure Event
• "events.load" - Load Event
• "events.dcl" - DOM Content Loaded

Palette's profiler can be started and stopped programatically but we recommend using the event listener approach, which is easier to reason about.