launchpad-dev team mailing list archive

[Gavin Panella <gavin.panella@xxxxxxxxxxxxx>]

Hi,

Today I found a problem when using many YUI().use(...) blocks in a
page. Specifically, we have some code that is inlined in every bug
page, one <script> per bugtask row, containing something like:

  YUI().use('node', 'lp.picker', function(Y) { ... });

The lp.picker module is defined externally, something like:

  YUI.add('lp.picker', function(Y) {
      Y.log('loading lp.picker');
      ...
  }, ..., {
      requires: ['lazr.activator', ...]
  });

Now, lazr.activator also has a Y.log('loading lazr.activator') line
within its YUI.add() block.

Loading a page with ~20 bugtasks while watching Firebug, I saw ~40
repetitions of:

  loading lazr.activator
  loading lp.picker

It seems like every use of YUI().use(...) builds a new, empty, "Y"
object before running each module's code through it. I haven't
measured the impact this has, but you can see an effect when running
Firebug; there is a noticeable delay as each row renders, and the whole
table takes ~10s to fully render.

It kind of seems obvious now, but I - and I'm not the only one -
assumed YUI3 was doing something clever here to make .use(...) blocks
cheap. In reality, each .use(...) call can cause a *lot* of code to be
run.

Thankfully the fix is reasonably obvious: change the bug index page to
use fewer .use(...)  blocks. This will also make the page cleaner and
shorter too, so it's not a nasty workaround.

However, Deryck wondered if there's something in the latest YUI3 beta
that ameliorates this issue. Is there a YUI3 expert who can comment on
this?

Thanks!

Gavin.