DEV Community

loading...

`performance.mark` with metadata is useful for Real user monitoring

azu profile image azu ・3 min read

I've created performance-mark-metadata.
This library provide performance.mark with custom meta data.

This library inspired by User Timing API Level 3 proposal.
This proposal will add details as metadata to performance.mark.

Currently, Performance.mark() API can not add metadata to marking.

Supports

Old browser need to Performance.mark() polyfill.

Install

Install with npm:

npm install performance-mark-metadata
Enter fullscreen mode Exit fullscreen mode

Example

import { PerformanceMetadataMarker } from "performance-mark-metadata";
const marker = new PerformanceMetadataMarker();
const metadata = {
    details: { key: "value" }
};
const markerName = "name";
// mark with metadata
marker.mark(markerName, metadata);
performance.getEntriesByName(markerName).forEach(entry => {
    // get metadata for entry
    const result = marker.getEntryMetadata(entry);
    /*
    {
        details: { key: "value" }
    };
    */
    assert.strictEqual(result, metadata, "should get same metadata");
});
Enter fullscreen mode Exit fullscreen mode

Usage in Node.js

Node.js 8.5.0 introduce perf_hooks module.
You can use this library by passing require("perf_hooks").performance to PerformanceMetadataMarker constructor arguments.

import { PerformanceMetadataMarker } from "performance-mark-metadata";
const nodePerformanceHook = require("perf_hooks");
const performance = nodePerformanceHook.performance;
const marker = new PerformanceMetadataMarker({
    performance
});
marker.mark("name", {
    details: { key: "value" }
});
Enter fullscreen mode Exit fullscreen mode

UseCase

This example show actual usage.

Example

You want to found performance problem on viewing the site.
You can analyze the problem by using performance-mark-metadata.

It is useful for Real user monitoring(RUM).
In development, you can use browser's development tools, but it is difficult about RUM.

Mark points

  • Mark current Frame Per Seconds(FPS)
  • Mark each action like "onClick"

Record FPS

const { PerformanceMetadataMarker } = require("performance-mark-metadata");
const marker = new PerformanceMetadataMarker();

const FpsEmitter = require("fps-emitter");
const fps = new FpsEmitter();
fps.on("update", function(FPS) {
    // mark current FPS
    marker.mark("FPS", {
        details: {
            FPS: FPS
        }
    });
});
Enter fullscreen mode Exit fullscreen mode

and record action

// heavy task
const heavyTaskButton = document.getElementById("js-button");
heavyTaskButton.addEventListener("click", () => {
    marker.mark("Heavy Action");

    // ... heavy task ...
})
Enter fullscreen mode Exit fullscreen mode

After that, you can get FPS and action logs.

const logData = performance.getEntriesByType("mark").map(entry => {
    const meta = marker.getEntryMetadata(entry);
    return {
        type: entry.name,
        timeStamp: entry.startTime,
        meta: meta
    };
});
Enter fullscreen mode Exit fullscreen mode

Analytics

You can get the log data and analyze the log data.

For example, visualize the log data by using C3.js.

example.gif

You can found the relationship between "FPS" and "Heavy Task".
As a result, You can found that the performance problem is caused by "Heavy Task".

Repository

Welcome to ⭐️ and Pull Request!

Discussion (0)

pic
Editor guide