Code Styling Project

If you are a developer of a plugin sometimes you have the desire to play around with effects. One thing comes up quickly: a lot of JavaScripts will be loaded and executed. Everybody using Javascripts inside blogs may know this.

I was pretty sure that I have had only parts of scripts actively requested. But WordPress has decided to load much more, than I’ve requested. So went down to the bottom of this phenomenon and found a small mistake in the WordPress code.

Actually, I tried to play around with effects exclusively, provided by the library. I was aware that I can load the component reached by the following statement:

wp_enqueue_script('scriptaculous-effects');

This statement inside plug-in or theme forces WordPress to dissolves the dependencies and possibly as-needed basis to extradite scripts in the proper order. The description in the Codex says that too. So I expected when loading the page following scripts in this order:

1. /wp-includes/js/prototype.js?ver=1.6
2. /wp-includes/js/scriptaculous/scriptaculous.js?ver=1.8.0
3. /wp-includes/js/scriptaculous/effects.js

So much for the theory, practice again, different. The result has surprised me as equally horrified:

1. /wp-includes/js/prototype.js?ver=1.6
2. /wp-includes/js/scriptaculous/scriptaculous.js?ver=1.8.0
3. /wp-includes/js/scriptaculous/builder.js
4. /wp-includes/js/scriptaculous/effects.js
5. /wp-includes/js/scriptaculous/dragdrop.js
6. /wp-includes/js/scriptaculous/controls.js
7. /wp-includes/js/scriptaculous/slider.js
8. /wp-includes/js/scriptaculous/sound.js
9. /wp-includes/js/scriptaculous/effects.js?ver=1.8.0

True observed effects.js was 2 times loaded, 5 scripts that I did not want and that are not needed to get the effects working. So what is going on?

In search of the “place of horror” in WordPress core code, I finally found the file script-loader.php where the whole dependencies have been defined. Here is a small excerpt:

	$scripts->add( 'scriptaculous-root', '/wp-includes/js/scriptaculous/scriptaculous.js', array('prototype'), '1.8.0');
	$scripts->add( 'scriptaculous-builder', '/wp-includes/js/scriptaculous/builder.js', array('scriptaculous-root'), '1.8.0');
	$scripts->add( 'scriptaculous-dragdrop', '/wp-includes/js/scriptaculous/dragdrop.js', array('scriptaculous-builder', 'scriptaculous-effects'), '1.8.0');
	$scripts->add( 'scriptaculous-effects', '/wp-includes/js/scriptaculous/effects.js', array('scriptaculous-root'), '1.8.0');
	$scripts->add( 'scriptaculous-slider', '/wp-includes/js/scriptaculous/slider.js', array('scriptaculous-effects'), '1.8.0');
	$scripts->add( 'scriptaculous-sound', '/wp-includes/js/scriptaculous/sound.js', array( 'scriptaculous-root' ), '1.8.0' );
	$scripts->add( 'scriptaculous-controls', '/wp-includes/js/scriptaculous/controls.js', array('scriptaculous-root'), '1.8.0');
	$scripts->add( 'scriptaculous', '', array('scriptaculous-dragdrop', 'scriptaculous-slider', 'scriptaculous-controls'), '1.8.0');

All seams to be correctly, including the dependencies. The false load behavior can not be justified here. So it’s time to look at the base file scriptaculous.js …

And now comes light into the matter, because there are 2 files in the folder:

• scriptaculous.js
• wp-scriptaculous.js

Both files differ only in one place, but is essential: the automatic loading of components! While the original file scriptaculous.js without giving an additional parameter always loads all components, the file wp-scriptaculous.js only loads components if they were explicitly stated. Now I’ve also started to look through several versions of WordPress, if the file has been modified and found it in WP2.1 and also found an entry about this bug in WP Trac.

It is indeed planned to take the modified file at WordPress to be able to solve all dependencies and never to load too many files. That is what the programmers at some times but again ignored or accidentally extracted.

A solution to modify (add red part) in the following WP 2.6.1 file: /wp-includes/script-loader.php

$scripts->add( 'scriptaculous-root', '/wp-includes/js/scriptaculous/wp-scriptaculous.js', array('prototype'), '1.8.0');

After that change everything’s still working as it should, but now there are only the component loaded, that really has been requested or from whom it actually depends.

This change has of course a significant and positive impact on the speed the pages can be shown now.
I have reported this bug for upcomming WP 2.6.2 and hope that the core team will fix it soon: Ticket #7642 (new defect)