golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Add client-side performance metrics for searchLoader 

As part of comparing Vue search with legacy search, we need to track how
long it takes to lazy load the wvui library. A similar metric was added
to measuring the mediawiki.searchSuggest module in
I0fa6b8904bd43c87a68e9161f00d686a0e588966.

This commit adds the following metrics which will only be used in our
synthetic tests. We are not doing RUM tests at this time.

To test locally, add the following to your LocalSettings.php and append
the query param `useskinversion=2` e.g.
(http://localhost:8181/wiki/Test?useskinversion=2):

```
$wgVectorUseCoreSearch = false;
```

Marks:

* mwVectorVueSearchLoadStart: Marks the start of loading the search
module.

* mwVectorVueSearchLoadEnd: Marks the end of loading the search
module.

Measures:

* mwVectorVueSearchLoadStartToLoadEnd: Measures the time it takes to
load the search module.

Bug: T251544
Change-Id: I14e44b45a66213821d69cd22395fedbae747da88
This commit is contained in:
Nicholas Ray 2020-09-28 17:18:56 -06:00
parent be6734937f
commit 8cf278d305
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/mediawiki.d.ts vendored
View File

@ -43,8 +43,12 @@ interface MediaWiki {
* Execute a function after one or more modules are ready.
*
* @param moduleName
* @param {Function} ready Callback to execute when all dependencies are
* ready.
* @param {Function} after Callback to execute if one or more dependencies
* failed.
*/
using( moduleName: string|null ): JQuery.Promise<any>;
using( moduleName: string|null, ready?: Function, error?: Function ): JQuery.Promise<any>;
/**
* Load a given resourceLoader module.

38
resources/skins.vector.js/searchLoader.js
View File

@ -11,6 +11,17 @@
var /** @type {VectorResourceLoaderVirtualConfig} */
config = require( /** @type {string} */ ( './config.json' ) ),
// T251544: Collect search performance metrics to compare Vue search with
// mediawiki.searchSuggest performance.
SHOULD_TEST_SEARCH = !!(
!config.wgVectorUseCoreSearch &&
window.performance &&
performance.mark &&
performance.measure &&
performance.getEntriesByName ),
LOAD_START_MARK = 'mwVectorVueSearchLoadStart',
LOAD_END_MARK = 'mwVectorVueSearchLoadEnd',
LOAD_MEASURE = 'mwVectorVueSearchLoadStartToLoadEnd',
SEARCH_FORM_ID = 'simpleSearch',
SEARCH_INPUT_ID = 'searchInput',
SEARCH_LOADING_CLASS = 'search-form__loader',
@ -32,7 +43,10 @@ var /** @type {VectorResourceLoaderVirtualConfig} */
function loadSearchModule( element, moduleName, afterLoadFn ) {
function requestSearchModule() {
mw.loader.using( moduleName ).then( afterLoadFn );
if ( SHOULD_TEST_SEARCH ) {
performance.mark( LOAD_START_MARK );
}
mw.loader.using( moduleName, afterLoadFn );
element.removeEventListener( 'focus', requestSearchModule );
}
@ -101,6 +115,16 @@ function setLoadingIndicatorListeners( element, attach, eventCallback ) {
}
}
/**
* Marks when the lazy load has completed.
*/
function markLoadEnd() {
if ( SHOULD_TEST_SEARCH && performance.getEntriesByName( LOAD_START_MARK ).length ) {
performance.mark( LOAD_END_MARK );
performance.measure( LOAD_MEASURE, LOAD_START_MARK, LOAD_END_MARK );
}
}
/**
* Initialize the loading of the search module as well as the loading indicator.
* Only initialize the loading indicator when not using the core search module.
@ -128,9 +152,17 @@ function initSearchLoader( document ) {
loadSearchModule(
searchInput,
SEARCH_MODULE_NAME,
setLoadingIndicatorListeners.bind( null,
searchForm, false, renderSearchLoadingIndicator )
function () {
markLoadEnd();
setLoadingIndicatorListeners(
/** @type {HTMLElement} */ ( searchForm ),
false,
renderSearchLoadingIndicator
);
}
);
}
}