From dd244864654fc732e69edab8cf29fc0b6a19ae31 Mon Sep 17 00:00:00 2001 From: Bo Borgerson Date: Fri, 11 Nov 2016 09:46:37 -0800 Subject: [PATCH] Add user timings for WebPageTest Use the browser's `performance.mark` API. Add two timings: - `react-server.wake` - When the ClientController is instantiated. - `react-server.renderAboveTheFold` - When the content above the fold has been re-rendered (visible page is interactive) - `react-server.renderComplete` - When the whole page has been re-rendered (fully interactive) --- packages/react-server/core/ClientController.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/react-server/core/ClientController.js b/packages/react-server/core/ClientController.js index 4e1dd8f64..2ac6835b0 100644 --- a/packages/react-server/core/ClientController.js +++ b/packages/react-server/core/ClientController.js @@ -83,6 +83,9 @@ class ClientController extends EventEmitter { // Log this after loglevel is set. logTimingData('wakeFromStart', window._reactServerTimingStart); + + performanceMark('wake'); + // this is a proxy for when above the fold content gets painted (displayed) on the browser logTimingData('displayAboveTheFold.fromStart', window._reactServerTimingStart, window.__displayAboveTheFold); } @@ -653,6 +656,8 @@ class ClientController extends EventEmitter { logTimingData(`renderAboveTheFold.fromStart`, tStart); logTimingData(`renderAboveTheFold.individual`, 0, totalRenderTime); logTimingData(`renderAboveTheFold.elementCount`, 0, index + 1); + + performanceMark('renderAboveTheFold'); } return; // Again, this isn't a real root element. } @@ -730,6 +735,8 @@ class ClientController extends EventEmitter { // Don't track this on client transitions. if (!this._previouslyRendered){ logTimingData('renderFromStart', tStart); + + performanceMark('renderComplete'); } // Some things are just different on our first pass. @@ -930,6 +937,14 @@ function buildContext(routes) { return context; } +// Create a "user timing" in WebPageTest. +function performanceMark(name) { + if (window.performance && performance.mark) { + performance.mark(`react-server.${name}`); + console.info(`react-server.${name}`); + } +} + function logTimingData(bucket, start, end = new Date) { if (start === undefined) { //don't send timing data if start timing is undefined