vector.js: Use idle callback (not rAF) for computed style read

requestAnimationFrame (rAF) is called before styles are computed.
Performing a style read there can require a forced style
recalcution which interrupts the browser's natural rendering
life cycle.

To gracefully observe layout of the page without inducing the
cost to render it, it should be accessed after rendering.
A suitable API to schedule time there is requestIdleCallback.

In any event, if the code that needs this measurement executes
very early for some reason, it is still computed on-demand which
means it can't cause any functional regression.

Change-Id: I0d8d3a0b158fa3d9e0895760d0691757f918d91d
This commit is contained in:
Timo Tijhof 2019-09-11 02:18:04 +01:00
parent 42f1a3d605
commit 9b2bcbbcae
1 changed files with 1 additions and 2 deletions

View File

@ -9,7 +9,6 @@ $( function () {
*/
var $cactions = $( '#p-cactions' ),
$tabContainer = $( '#p-views ul' ),
rAF = window.requestAnimationFrame || setTimeout,
// Avoid forced style calculation during page load
initialCactionsWidth = function () {
var width = $cactions.width();
@ -19,7 +18,7 @@ $( function () {
return width;
};
rAF( initialCactionsWidth );
mw.requestIdleCallback( initialCactionsWidth );
/**
* Focus search input at the very end