wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-15 19:59:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
vector.js
View file

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