compactlinks: Optimise performance of DOM logic

The createCompactList() function runs synchronously during the
module execution burst. Due to it visually changing the page, I
won't defer it with rIC for the time being, although that should
be considered for the future. For this commit, I'm trying to make
it fit the budget of <50ms because ULS is currently usually taking
80ms-180ms on desktop (MacBook/Chrome CPU/4), and that's during
batch execution with other modules as well, thus freezing the
UI thread for much longer than that.

constructor:
* Remove needless clone of jQuery object.
  Use $foo instead of $( $foo ).
* Remove creation of 'interlanguageList' and 'compactList' objects
  that are immediately removed and re-created by init().

init/getInterlanguageList:
* Use the HTMLElement.lang and HTMLAnchorElement.href properties
  directly instead of the DOM getAttribute().
  This means stores a full url instead of a relative url, which
  should help avoid other bugs in the future.
* Remove needless jQuery() constructor and jQuery.text() call.
  Use Node.textContent directly instead.
* Use HTMLElement#querySelectorAll instead of jQuery#find().

init/getCompactList/../filterByLangsInText:
* Avoid jQuery() constructor and jQuery.attr(),
  use the HTMLElement.lang property directly.
* Avoid jQuery() selector, call querySelectorAll directly.

init/getCompactList/../getCommonLanguages/../getFrequentLanguageList:
* Avoid temporary array copies from concat() and function overhead
  with forEach() and filter().
  Instead, keep only a single array, and iterate it once.

init/getCompactList/../filterByBadges (~10m -> ~0.5ms):
* Use one query via $(), instead of two queries $()+find().
* Use $.map() directly instead of map()+fakejQueryObject+toArray().
* Use querySelector(One) for the child instead of $()+find().
* Use HTMLElement.lang property directly.

init/hideOriginal (~5m -> ~0.8ms):
* Use querySelectorAll() directly instead of jQuery find().
* Set HTMLElement.style directly instead of jQuery() css().

init/render/addTrigger:
* Use createElement() and direct properties instead of $(), addClass(),
  prop() and text().
* The mw.msg() calls use text() and jqueryMsg#parser which is
  expensive.
  Use plain() for 'ext-uls-compact-link-info', which doesn't need parsing.
  Keep text() for the other message, and document why.

init/listen:
* Use async Deferred#then() instead of sometimes-sync Deferred#done().

Bug: T127328
Change-Id: I424c34fb82c8e95407f7b934e6d42019becbf909
This commit is contained in:
Timo Tijhof
2018-09-07 05:55:56 +01:00
committed by jenkins-bot
parent 00b1ea40ae
commit effcd80471
2 changed files with 101 additions and 68 deletions

View File

@@ -180,35 +180,34 @@
* @return {Array} List of language codes without duplicates.
*/
mw.uls.getFrequentLanguageList = function ( countryCode ) {
var unique = [],
list = [
mw.config.get( 'wgUserLanguage' ),
mw.config.get( 'wgContentLanguage' ),
mw.uls.getBrowserLanguage()
]
.concat( mw.uls.getPreviousLanguages() )
.concat( mw.uls.getAcceptLanguageList() );
var i, j, lang,
ret = [],
lists = [
[
mw.config.get( 'wgUserLanguage' ),
mw.config.get( 'wgContentLanguage' ),
mw.uls.getBrowserLanguage()
],
mw.uls.getPreviousLanguages(),
mw.uls.getAcceptLanguageList()
];
countryCode = countryCode || mw.uls.getCountryCode();
if ( countryCode ) {
list = list.concat( $.uls.data.getLanguagesInTerritory( countryCode ) );
lists.push( $.uls.data.getLanguagesInTerritory( countryCode ) );
}
list.forEach( function ( lang ) {
if ( unique.indexOf( lang ) === -1 ) {
unique.push( lang );
for ( i = 0; i < lists.length; i++ ) {
for ( j = 0; j < lists[ i ].length; j++ ) {
lang = lists[ i ][ j ];
// Make flat, make unique, and ignore unknown/unsupported languages
if ( ret.indexOf( lang ) === -1 && $.uls.data.getAutonym( lang ) !== lang ) {
ret.push( lang );
}
}
} );
}
// Filter out unknown and unsupported languages
unique = unique.filter( function ( langCode ) {
// If the language is already known and defined, just use it.
// $.uls.data.getAutonym will resolve redirects if any.
return $.uls.data.getAutonym( langCode ) !== langCode;
} );
return unique;
return ret;
};
}() );