Skip to content

Commit

Permalink
Add inserter performance measurements (#26634)
Browse files Browse the repository at this point in the history
  • Loading branch information
@david-szabo97
david-szabo97 authored Dec 15, 2020
1 parent cbbc353 commit 0afc39c
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 19 deletions.
70 changes: 55 additions & 15 deletions bin/plugin/commands/performance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,43 @@ const config = require( '../config' );
* @property {number[]} load Load Time.
* @property {number[]} type Average type time.
* @property {number[]} focus Average block selection time.
* @property {number[]} inserterOpen Average time to open global inserter.
* @property {number[]} inserterHover Average time to move mouse between two block item in the inserter.
*/

/**
* @typedef WPPerformanceResults
*
* @property {number} load Load Time.
* @property {number} type Average type time.
* @property {number} minType Minium type time.
* @property {number} maxType Maximum type time.
* @property {number} focus Average block selection time.
* @property {number} minFocus Min block selection time.
* @property {number} maxFocus Max block selection time.
* @property {number} load Load Time.
* @property {number} type Average type time.
* @property {number} minType Minium type time.
* @property {number} maxType Maximum type time.
* @property {number} focus Average block selection time.
* @property {number} minFocus Min block selection time.
* @property {number} maxFocus Max block selection time.
* @property {number} inserterOpen Average time to open global inserter.
* @property {number} minInserterOpen Min time to open global inserter.
* @property {number} maxInserterOpen Max time to open global inserter.
* @property {number} inserterHover Average time to move mouse between two block item in the inserter.
* @property {number} minInserterHover Min time to move mouse between two block item in the inserter.
* @property {number} maxInserterHover Max time to move mouse between two block item in the inserter.
*/
/**
* @typedef WPFormattedPerformanceResults
*
* @property {string=} load Load Time.
* @property {string=} type Average type time.
* @property {string=} minType Minium type time.
* @property {string=} maxType Maximum type time.
* @property {string=} focus Average block selection time.
* @property {string=} minFocus Min block selection time.
* @property {string=} maxFocus Max block selection time.
* @property {string=} load Load Time.
* @property {string=} type Average type time.
* @property {string=} minType Minium type time.
* @property {string=} maxType Maximum type time.
* @property {string=} focus Average block selection time.
* @property {string=} minFocus Min block selection time.
* @property {string=} maxFocus Max block selection time.
* @property {string=} inserterOpen Average time to open global inserter.
* @property {string=} minInserterOpen Min time to open global inserter.
* @property {string=} maxInserterOpen Max time to open global inserter.
* @property {string=} inserterHover Average time to move mouse between two block item in the inserter.
* @property {string=} minInserterHover Min time to move mouse between two block item in the inserter.
* @property {string=} maxInserterHover Max time to move mouse between two block item in the inserter.
*/

/**
Expand Down Expand Up @@ -109,6 +123,12 @@ function curateResults( results ) {
focus: average( results.focus ),
minFocus: Math.min( ...results.focus ),
maxFocus: Math.max( ...results.focus ),
inserterOpen: average( results.inserterOpen ),
minInserterOpen: Math.min( ...results.inserterOpen ),
maxInserterOpen: Math.max( ...results.inserterOpen ),
inserterHover: average( results.inserterHover ),
minInserterHover: Math.min( ...results.inserterHover ),
maxInserterHover: Math.max( ...results.inserterHover ),
};
}

Expand Down Expand Up @@ -166,6 +186,12 @@ async function runTestSuite( testSuite, performanceTestDirectory ) {
focus: results.map( ( r ) => r.focus ),
minFocus: results.map( ( r ) => r.minFocus ),
maxFocus: results.map( ( r ) => r.maxFocus ),
inserterOpen: results.map( ( r ) => r.inserterOpen ),
minInserterOpen: results.map( ( r ) => r.minInserterOpen ),
maxInserterOpen: results.map( ( r ) => r.maxInserterOpen ),
inserterHover: results.map( ( r ) => r.inserterHover ),
minInserterHover: results.map( ( r ) => r.minInserterHover ),
maxInserterHover: results.map( ( r ) => r.maxInserterHover ),
},
median
);
Expand Down Expand Up @@ -268,7 +294,21 @@ async function runPerformanceTests( branches, options ) {
log( '\n>> 🎉 Results.\n' );
for ( const testSuite of testSuites ) {
log( `\n>> ${ testSuite }\n` );
console.table( results[ testSuite ] );

/** @type {Record<string, Record<string, string>>} */
const invertedResult = {};
Object.entries( results[ testSuite ] ).reduce(
( acc, [ key, val ] ) => {
for ( const entry of Object.keys( val ) ) {
if ( ! acc[ entry ] ) acc[ entry ] = {};
// @ts-ignore
acc[ entry ][ key ] = val[ entry ];
}
return acc;
},
invertedResult
);
console.table( invertedResult );
}
}

Expand Down
34 changes: 33 additions & 1 deletion packages/e2e-tests/config/performance-reporter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ class PerformanceReporter {
}

const results = readFileSync( filepath, 'utf8' );
const { load, type, focus } = JSON.parse( results );
const { load, type, focus, inserterOpen, inserterHover } = JSON.parse(
results
);

if ( load && load.length ) {
// eslint-disable-next-line no-console
Expand Down Expand Up @@ -63,6 +65,36 @@ Fastest time to select a block: ${ success(
) }` );
}

if ( inserterOpen && inserterOpen.length ) {
// eslint-disable-next-line no-console
console.log( `
${ title( 'Opening Global Inserter Performance:' ) }
Average time to open global inserter: ${ success(
round( average( inserterOpen ) ) + 'ms'
) }
Slowest time to open global inserter: ${ success(
round( Math.max( ...inserterOpen ) ) + 'ms'
) }
Fastest time to open global inserter: ${ success(
round( Math.min( ...inserterOpen ) ) + 'ms'
) }` );
}

if ( inserterHover && inserterHover.length ) {
// eslint-disable-next-line no-console
console.log( `
${ title( 'Inserter Block Item Hover Performance:' ) }
Average time to move mouse between two block item in the inserter: ${ success(
round( average( inserterHover ) ) + 'ms'
) }
Slowest time to move mouse between two block item in the inserter: ${ success(
round( Math.max( ...inserterHover ) ) + 'ms'
) }
Fastest time to move mouse between two block item in the inserter: ${ success(
round( Math.min( ...inserterHover ) ) + 'ms'
) }` );
}

// eslint-disable-next-line no-console
console.log( '' );
}
Expand Down
83 changes: 80 additions & 3 deletions packages/e2e-tests/specs/performance/post-editor.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
createNewPost,
saveDraft,
insertBlock,
openGlobalBlockInserter,
closeGlobalBlockInserter,
} from '@wordpress/e2e-test-utils';

function readFile( filePath ) {
Expand Down Expand Up @@ -51,6 +53,18 @@ function isFocusEvent( item ) {
return isKeyEvent( item ) && item.args.data.type === 'focus';
}

function isClickEvent( item ) {
return isKeyEvent( item ) && item.args.data.type === 'click';
}

function isMouseOverEvent( item ) {
return isKeyEvent( item ) && item.args.data.type === 'mouseover';
}

function isMouseOutEvent( item ) {
return isKeyEvent( item ) && item.args.data.type === 'mouseout';
}

function getEventDurationsForType( trace, filterFunction ) {
return trace.traceEvents
.filter( filterFunction )
Expand All @@ -69,6 +83,17 @@ function getSelectionEventDurations( trace ) {
return [ getEventDurationsForType( trace, isFocusEvent ) ];
}

function getClickEventDurations( trace ) {
return [ getEventDurationsForType( trace, isClickEvent ) ];
}

function getHoverEventDurations( trace ) {
return [
getEventDurationsForType( trace, isMouseOverEvent ),
getEventDurationsForType( trace, isMouseOutEvent ),
];
}

jest.setTimeout( 1000000 );

describe( 'Post Editor Performance', () => {
Expand All @@ -77,6 +102,8 @@ describe( 'Post Editor Performance', () => {
load: [],
type: [],
focus: [],
inserterOpen: [],
inserterHover: [],
};

const html = readFile(
Expand Down Expand Up @@ -110,11 +137,61 @@ describe( 'Post Editor Performance', () => {
results.load.push( new Date() - startTime );
}

// Measuring typing performance
// Measure time to open inserter
await page.waitForSelector( '.edit-post-layout' );
const traceFile = __dirname + '/trace.json';
let traceResults;
for ( let j = 0; j < 10; j++ ) {
await page.tracing.start( {
path: traceFile,
screenshots: false,
categories: [ 'devtools.timeline' ],
} );
await openGlobalBlockInserter();
await page.tracing.stop();

traceResults = JSON.parse( readFile( traceFile ) );
const [ mouseClickEvents ] = getClickEventDurations( traceResults );
for ( let k = 0; k < mouseClickEvents.length; k++ ) {
results.inserterOpen.push( mouseClickEvents[ k ] );
}
await closeGlobalBlockInserter();
}

// Measure inserter hover performance
const paragraphBlockItem =
'.block-editor-inserter__menu .editor-block-list-item-paragraph';
const headingBlockItem =
'.block-editor-inserter__menu .editor-block-list-item-heading';
await openGlobalBlockInserter();
await page.waitForSelector( paragraphBlockItem );
await page.hover( paragraphBlockItem );
await page.hover( headingBlockItem );
for ( let j = 0; j < 20; j++ ) {
await page.tracing.start( {
path: traceFile,
screenshots: false,
categories: [ 'devtools.timeline' ],
} );
await page.hover( paragraphBlockItem );
await page.hover( headingBlockItem );
await page.tracing.stop();

traceResults = JSON.parse( readFile( traceFile ) );
const [ mouseOverEvents, mouseOutEvents ] = getHoverEventDurations(
traceResults
);
for ( let k = 0; k < mouseOverEvents.length; k++ ) {
results.inserterHover.push(
mouseOverEvents[ k ] + mouseOutEvents[ k ]
);
}
}
await closeGlobalBlockInserter();

// Measuring typing performance
await insertBlock( 'Paragraph' );
i = 200;
const traceFile = __dirname + '/trace.json';
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand All @@ -125,7 +202,7 @@ describe( 'Post Editor Performance', () => {
}

await page.tracing.stop();
let traceResults = JSON.parse( readFile( traceFile ) );
traceResults = JSON.parse( readFile( traceFile ) );
const [
keyDownEvents,
keyPressEvents,
Expand Down
2 changes: 2 additions & 0 deletions packages/e2e-tests/specs/performance/site-editor.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ describe( 'Site Editor Performance', () => {
load: [],
type: [],
focus: [],
inserterOpen: [],
inserterHover: [],
};

await visitAdminPage(
Expand Down

0 comments on commit 0afc39c

Please sign in to comment.