Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize the order of styles and scripts in <head>

Browse source 
Emit styles and scripts in the following order:
* Inline <script>...</script> tags.
* External stylesheets.
* External script tags.

I have attempted this before in I98d383a6, and subsequently reverted (in
I151f74a41) when it failed to show a performance improvement. Our ability
to measure performance were substantially poorer then, so I would like to
give this another try and see if it makes a dent in first render times.

Change-Id: I5e6c79c7041aa77bcdc6130e91e77aa538334c42
This commit is contained in:
Ori Livneh 2015-08-13 14:30:31 -07:00
parent 7678bc7a53
commit 09537e83e7
1 changed files with 33 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
includes/OutputPage.php
View file

@ -2702,15 +2702,14 @@ class OutputPage extends ContextSource {
}
$ret .= Html::element( 'title', null, $this->getHTMLTitle() ) . "\n";
$ret .= $this->getInlineHeadScripts() . "\n";
$ret .= $this->buildCssLinks() . "\n";
$ret .= $this->getExternalHeadScripts() . "\n";
foreach ( $this->getHeadLinksArray() as $item ) {
$ret .= $item . "\n";
}
$ret .= $this->getHeadScripts() . "\n";
foreach ( $this->mHeadItems as $item ) {
$ret .= $item . "\n";
}
@ -2879,7 +2878,7 @@ class OutputPage extends ContextSource {
// Inline private modules. These can't be loaded through load.php for security
// reasons, see bug 34907. Note that these modules should be loaded from
// getHeadScripts() before the first loader call. Otherwise other modules can't
// getExternalHeadScripts() before the first loader call. Otherwise other modules can't
// properly use them as dependencies (bug 30914)
if ( $group === 'private' ) {
if ( $only == ResourceLoaderModule::TYPE_STYLES ) {
@ -2982,6 +2981,34 @@ class OutputPage extends ContextSource {
* @return string HTML fragment
*/
function getHeadScripts() {
return $this->getInlineHeadScripts() . "\n" . $this->getExternalHeadScripts();
}
/**
* <script src="..."> tags for "<head>". This is the startup module
* and other modules marked with position 'top'.
*
* @return string HTML fragment
*/
function getExternalHeadScripts() {
$links = array();
// Startup - this provides the client with the module manifest and loads jquery and mediawiki base modules
$links[] = $this->makeResourceLoaderLink( 'startup', ResourceLoaderModule::TYPE_SCRIPTS );
if ( $this->getConfig()->get( 'ResourceLoaderExperimentalAsyncLoading' ) ) {
$links[] = $this->getScriptsForBottomQueue();
}
return self::getHtmlFromLoaderLinks( $links );
}
/**
* <script>...</script> tags to put in "<head>".
*
* @return string HTML fragment
*/
function getInlineHeadScripts() {
$links = array();
// Client profile classes for <html>. Allows for easy hiding/showing of UI components.
@ -2995,9 +3022,6 @@ class OutputPage extends ContextSource {
. '.replace( /(^|\s)client-nojs(\s|$)/, "$1client-js$2" );'
);
// Startup - this provides the client with the module manifest and loads jquery and mediawiki base modules
$links[] = $this->makeResourceLoaderLink( 'startup', ResourceLoaderModule::TYPE_SCRIPTS );
// Load config before anything else
$links[] = ResourceLoader::makeInlineScript(
ResourceLoader::makeConfigSetScript( $this->getJSVars() )
@ -3026,10 +3050,6 @@ class OutputPage extends ContextSource {
ResourceLoaderModule::TYPE_SCRIPTS
);
if ( $this->getConfig()->get( 'ResourceLoaderExperimentalAsyncLoading' ) ) {
$links[] = $this->getScriptsForBottomQueue();
}
return self::getHtmlFromLoaderLinks( $links );
}
@ -3041,7 +3061,7 @@ class OutputPage extends ContextSource {
* and user JS.
*
* @param bool $unused Previously used to let this method change its output based
* on whether it was called by getHeadScripts() or getBottomScripts().
* on whether it was called by getExternalHeadScripts() or getBottomScripts().
* @return string
*/
function getScriptsForBottomQueue( $unused = null ) {
@ -3123,7 +3143,7 @@ class OutputPage extends ContextSource {
$this->getSkin()->setupSkinUserCss( $this );
if ( $this->getConfig()->get( 'ResourceLoaderExperimentalAsyncLoading' ) ) {
// Already handled by getHeadScripts()
// Already handled by getExternalHeadScripts()
return '';
}
return $this->getScriptsForBottomQueue();