From 3ef8d8a418579b51e8e6aa777fec373c17782b91 Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Mon, 29 Aug 2016 21:07:52 -0700 Subject: [PATCH] mw.loader: Use requestAnimationFrame for addEmbeddedCSS() setTimeout is fairly inefficient for this purpose as it tends to schedule for further in the future than rAF would. And even then, it happens at a bad time for the browser with regards to style changes. Instead, use rAF, which typically executes earlier and at the point where the browser is expecting style changes. This makes top and bottom modules finish execution earlier by having their styles applied sooner. Change-Id: Ie4e7464aa811fa8ea4e4f115696f0bddbd28737b --- resources/src/mediawiki/mediawiki.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/src/mediawiki/mediawiki.js b/resources/src/mediawiki/mediawiki.js index 7ceb5fe9ee..78c674c6ba 100644 --- a/resources/src/mediawiki/mediawiki.js +++ b/resources/src/mediawiki/mediawiki.js @@ -858,7 +858,8 @@ cssBuffer = '', cssBufferTimer = null, cssCallbacks = $.Callbacks(), - isIE9 = document.documentMode === 9; + isIE9 = document.documentMode === 9, + rAF = window.requestAnimationFrame || setTimeout; function getMarker() { if ( !marker ) { @@ -930,10 +931,9 @@ if ( !cssBuffer || cssText.slice( 0, '@import'.length ) !== '@import' ) { // Linebreak for somewhat distinguishable sections cssBuffer += '\n' + cssText; - // TODO: Using requestAnimationFrame would perform better by not injecting - // styles while the browser is busy painting. if ( !cssBufferTimer ) { - cssBufferTimer = setTimeout( function () { + cssBufferTimer = rAF( function () { + // Wrap in anonymous function that takes no arguments // Support: Firefox < 13 // Firefox 12 has non-standard behaviour of passing a number // as first argument to a setTimeout callback. -- 2.20.1