Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Best practices for performance at scale? #22

Open
pleonard212 opened this issue Apr 26, 2012 · 2 comments
Open

Best practices for performance at scale? #22

pleonard212 opened this issue Apr 26, 2012 · 2 comments

Comments

@pleonard212
Copy link

For somewhat improbable reasons, I have some pages with 100 to 200 wordclouds being invoked simultaneously. At this scale, setting delaymode to true or false doesn't make much of a difference (at around 30, it is helpful to have it to true.)

I'm wondering if there are any obvious things I can do to lessen the burden this puts on the javascript engine. I'm currently invoking all of the wordclouds with the document.ready function, and addressing the divs by id, which I understand is the fastest way for jQuery to work.

I've thought of trying to stagger the requests through some kind of timing loop, or changing the delay value in delayedMode, but thought I'd check in here first to see if anyone had any ideas. Thanks!

@lucaong
Copy link
Owner

lucaong commented Apr 27, 2012

If not rendering the clouds in parallel is not an issue, an idea could be to concatenate clouds using a callback function. Something like this:

<div id="cloud_0"></div>
<div id="cloud_1"></div>
<div id="cloud_2"></div>
<!-- and so on... -->
var wordArrays = [...] // Array of word arrays, one for each cloud

// Recursive function to render clouds one after another
var renderNextCloud = function(cloudCounter) {
  var container = $("#cloud_"+cloudCounter);
  if(container.length === 0) { return }
  container.jQCloud(wordArrays[cloudCounter], {
    afterCloudRender: function(){
      renderNextCloud(++cloudCounter);
    }
  });
});

// When ready, start rendering one cloud after another
$(function() {
  renderNextCloud(0);
});

@pleonard212
Copy link
Author

Thanks very much -- this seems to have improved things quite a bit. What I eventually ended up doing was using the jquery-appear plugin: http://code.google.com/p/jquery-appear/ ... which ensures that the browser only has to process those div's that are visible on the screen at one time.

The essential problem may be how FireFox (even version 12) handles math functions... they try to guess which of two JIT compilers to use, and perhaps sometimes guess wrong. Regardless, it's amazing the difference between what Chrome/Safari can handle nowadays, which routinely breaks FireFox's JS interpreter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants