Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add inserter performance measures #26634

Merged
merged 6 commits into from
Dec 15, 2020
Merged

Add inserter performance measures #26634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e51de2
Add inserter perf measures
david-szabo97 Nov 2, 2020
1949cae
Add time to open inserter to perf command
david-szabo97 Nov 6, 2020
3fd52e6
Fix undefined error
david-szabo97 Nov 6, 2020
8f84892
Add time to hover block item in inserter to perf command
david-szabo97 Nov 6, 2020
fd0c111
Formatting
david-szabo97 Nov 6, 2020
a071206
Invert result table
david-szabo97 Nov 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 55 additions & 15 deletions bin/plugin/commands/performance.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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