client-side-use-on-web-browser

Client-side use on Web Browser

Server

The server.js Node.js program serves the files in the current directory and also serves the perfetto module from ../../../index.mjs.

It also exposes the following endpoints:

• /api/perftrace (POST) - Reads the performance trace from the HTTP request body, writes it to a file and closes the server
• /api/data[0-7] (GET) - Serves {"text": "<text-to-display-by-the-client>"} after an artificial delay
• /api/submit (GET) - Serves {"data": "<submission-button-text>"} after an artificial delay

Client

The perftrace.mjs module is imported in (only works here because the server is designed to serve the file with this name):

perftrace/docs/examples/client-side-use-on-web-browser/index.mjs

Line 1 in fbb0d21

import { TraceEvents } from "./perftrace.mjs";

A new TraceEvents object is created in:

perftrace/docs/examples/client-side-use-on-web-browser/index.mjs

Line 4 in fbb0d21

const traceEvents = new TraceEvents();

The client displays a list of loader animations while fetching the data from the /api/data[0-7] endpoint in parallel and display those in:

perftrace/docs/examples/client-side-use-on-web-browser/index.mjs

Lines 10 to 24 in fbb0d21

	function fetchDataId(id) {
	performance.mark(`before fetching data ${id}`);
	return fetch(`/api/data${id}`)
	.then((response) => {
	return response.json();
	})
	.then((data) => {
	listItems[id].innerHTML = "";
	const p = document.createElement("p");
	p.className = "data";
	p.innerText = data.text;
	listItems[id].appendChild(p);
	performance.measure(`fetch data ${id}`, `before fetching data ${id}`);
	});
	}

The loads are measured using the Performance Timeline APIs:

performance.mark("before");
// code to measure
performance.measure("after", "before");

Once the data is fully loaded, a button is displayed, clicking which, sends the performance trace to the /api/perftrace endpoint which causes the server to write the performance trace to a file and shut down:

perftrace/docs/examples/client-side-use-on-web-browser/index.mjs

Lines 47 to 61 in fbb0d21

	function submitTrace() {
	submissionDiv.innerHTML = "";
	const events = traceEvents.getEvents();
	traceEvents.destroy();
	// post events to /api/perftrace
	fetch("/api/perftrace", {
	method: "POST",
	headers: {
	"Accept": "application/json",
	"Content-Type": "application/json"
	},
	body: JSON.stringify(events)
	});
	}

After running node server.js, opening http://localhost:8080 in your browser and clicking the Submit trace button, the generated events.json file can be opened on https://ui.perfetto.dev for visualization:

Here's a demo: