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

diff --git a/resources/src/mediawiki/mediawiki.js b/resources/src/mediawiki/mediawiki.js
index 7ceb5fe..78c674c 100644 (file)
--- 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.